Question

我希望使用纯CSS和Javascript来实现这一目标。我也熟悉PHP。我正在避免使用jquery，因为我正在尝试更多地学习javascript而且我发现在某些word-press网站中，jquery并不总是按照我需要的方式工作。据我所知，我没有做任何程序错误，但我必须遗漏一些东西，因为它似乎没有正常工作。首先，我将给出一个可以找到代码的链接。 http://jsfiddle.net/FFCFy/13/

接下来我将给出实际的代码。

使用Javascript：

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：

<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>

最终我会修改它来隐藏和显示不同的文字，但是一旦我弄清楚了，我就会明白这一点。

Answer 1

您只需使用此代码：

<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>

Answer 2

您不需要 setInterval 。

function stext() {
    var x = document.getElementById("div1");
    var y = document.getElementById("div2");
    x.style.color = 'red';
    y.style.color = 'black';
}

Updated Working JSFiddle

Answer 3

为什么不呢：

#div1:hover {
    color: red;
}

Answer 4

您不需要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';
 }

Answer 5

您的函数htext和stext是在匿名函数中定义的，因此不是全局可用的。将函数定义移到匿名函数之外，或将函数分配给全局对象（窗口），以便它们可用。

但是又一次......为什么这个代码在setInterval调用中呢？这没有任何意义。

鼠标悬停时更改文本颜色

使用Javascript：

HTML：

5 个答案: