[英]Change Text Color on mouseover
我希望使用纯CSS和Javascript来实现这一目标。 我也熟悉PHP。 我正在避免使用jquery,因为我正在尝试更多地学习javascript而且我发现在某些word-press网站中,jquery并不总是按照我需要的方式工作。 据我所知,我没有做任何程序错误,但我必须遗漏一些东西,因为它似乎没有正常工作。 首先,我将给出一个可以找到代码的链接。 http://jsfiddle.net/FFCFy/13/
接下来我将给出实际的代码。
setInterval(function() {
var x = document.getElementById("div1");
var y = document.getElementById("div2");
function stext() {
x.style.color = 'red';
y.style.color = 'black';
}
function htext() {
x.style.color = 'black';
y.style.color = 'red';
}
}, 250);
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext" onmouseout="htext">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;"onmouseover="htext" onmouseout="stext">Text2</span>
</body>
</html>
最终我将修改它以隐藏和显示不同的文本,但是一旦我弄明白,我就会明白这一点。
你可以使用这个代码:
<html>
<head>
<body>
<font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">Text1</font>
<font onmouseover="this.style.color='black';" onmouseout="this.style.color='red';">Text2</font>
</body>
</html>
为什么不呢:
#div1:hover {
color: red;
}
您不需要setInterval 。
function stext() {
var x = document.getElementById("div1");
var y = document.getElementById("div2");
x.style.color = 'red';
y.style.color = 'black';
}
你不需要setInterval:
var x = document.getElementById("div1");
var y = document.getElementById("div2");
function stext() {
x.style.color = 'red';
y.style.color = 'black';
}
function htext() {
x.style.color = 'black';
y.style.color = 'red';
}
您的函数htext
和stext
是在匿名函数内定义的,因此不是全局可用的。 将函数定义移到匿名函数之外,或将函数分配给全局对象(窗口),以便它们可用。
但话又说回来......为什么这个代码在setInterval调用中呢? 这没有任何意义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.