鼠标悬停时更改文本颜色

Question

鼠标悬停时更改文本颜色

myt*_*024 5 javascript css onmouseover onmouseout

我希望使用纯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);

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

最终我将修改它以隐藏和显示不同的文本,但是一旦我弄明白,我就会明白这一点.

Answer 1

luk*_*k27 6

您可以简单地使用以下代码：

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

Run Code Online (Sandbox Code Playgroud)

这是一个很好的解决方案，但是代码不正确。它应该是`onmouseover =“ this。** style **。color ='red';”和`onmouseout =“ this。** style **。color ='black';”`等（[[Reference ]（http://www.w3schools.com/jsref/prop_style_color.asp）） (3认同)

Answer 2

Ani*_*han 3

您不需要setInterval。

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

更新工作 JSFiddle

\n\n

\xe2\x80\x8b

\n

归档时间：	13 年，2 月前
查看次数：	54220 次
最近记录：	6 年，10 月前