鼠标悬停时更改文本颜色

Question

鼠标悬停时更改文本颜色

6

我希望用纯CSS和Javascript实现这个功能。我也能接受PHP。我避免使用jQuery，因为我想更深入地了解JavaScript，并且我发现在一些WordPress站点上，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>

最终我会修改这个程序，以便隐藏和显示不同的文本，但是在我弄清楚之前，我会先处理这个。

- myth024

2

也许我误解了你的问题，但为什么不使用CSS的:hover？（你需要将元素制作成<a>标签以适应IE9以下版本，但它会改变悬停颜色） - Scrimothy

你想要实现什么目标？ - Whymarrh

一些旧版浏览器对某些元素类型的 :hover 存在问题，这就是使用 jQuery 的好处，它知道如何解决这个问题。 - Barmar

不使用CSS hover的目的是，我的意图是最终实现一个与简单颜色无关的变化。那时候是2012年，我还在学习，并且正在寻找一种在鼠标悬停时影响变化的方法，以便最终将这个想法应用到更大的项目中。我得到的第一个答案最终成为了我所寻找的解决方案。 - myth024

5个回答

3

您不需要使用setInterval。

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

更新的有效JSFiddle

(这段内容没有需要翻译的部分)

- Anirudh Ramanathan

我知道这已经是很长时间了。我已经超越了这个问题，甚至不记得当时为什么要特别尝试做这件事了。谢谢。 - myth024

3

为什么不这样做呢：

#div1:hover {
    color: red;
}

- Bruno

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

0

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

- user626963

0

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

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

- Hubro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luk27 · Accepted Answer

您可以简单地使用这段代码：

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