鼠标悬停时更改文本颜色答案

【问题标题】：Change Text Color on mouseover鼠标悬停时更改文本颜色
【发布时间】：2012-10-31 22:20:23
【问题描述】：

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

最终我将对其进行修改以隐藏和显示不同的文本，但一旦我弄清楚了这一点，我就会做到这一点。

【问题讨论】：

也许我误解了你的问题，但为什么不使用 CSS :hover？（您需要为 <a> 标签，但它会改变悬停颜色）
你到底想完成什么？
一些老浏览器在某些元素类型上不会有:hover 的问题吗？这是使用 jQuery 的好处，它知道如何解决这个问题。
不使用 CSS 悬停的目的是我的意图是最终做出与简单颜色无关的更改。那时在 2012 年，我还在学习，我正在寻找一种方法来影响鼠标悬停的变化，这样我最终可以将这个想法融入到一个更大的项目中。我收到的第一个答案最终成为我正在寻找的解决方案。

标签： javascript css onmouseover onmouseout

【解决方案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>

【讨论】：

这是一个很好的解决方案，但是代码不正确。应该是onmouseover = "this.**style**.color='red';"和onmouseout = "this.**style**.color='black';"等（Reference）
这很有效，并且简化了调用单独函数的过程——这正是我想要的。竖起大拇指。

【解决方案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

【讨论】：

我知道这已经很久了。我现在已经超越了这一点，甚至不记得我为什么要专门这样做。谢谢。

【解决方案3】：

为什么不只是：

#div1:hover {
    color: red;
}

【讨论】：

在某些情况下，预先存在的 CSS 已经定义了一个悬停元素，我可以更动态地指定更改以及执行淡入淡出效果，而不仅仅是更改简单的颜色。

【解决方案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';
 }

【讨论】：

【解决方案5】：

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

但话又说回来......为什么这段代码仍然在 setInterval 调用中？这没有任何意义。

【讨论】：