Javascript 更改鼠标悬停时的文本颜色_Javascript_Css_Onmouseover_Onmouseout

Javascript 更改鼠标悬停时的文本颜色

javascript css

Javascript 更改鼠标悬停时的文本颜色,javascript,css,onmouseover,onmouseout,Javascript,Css,Onmouseover,Onmouseout,我希望使用纯CSS和Javascript来实现这一点。我对PHP也没问题。我之所以避免使用jquery，是因为我正在尝试更多地学习javascript，并且我发现在一些word press站点中，jquery并不总是按照我需要的方式工作。据我所知，我没有犯任何编程错误，但我肯定遗漏了一些东西，因为它似乎工作不正常。首先，我将给出一个可以找到代码的链接接下来我将给出实际的代码 Javascript: html: TEXT1 文本2 最终我会修改它来隐藏和显示不同的文本，但一旦我弄明白了这

我希望使用纯CSS和Javascript来实现这一点。我对PHP也没问题。我之所以避免使用jquery，是因为我正在尝试更多地学习javascript，并且我发现在一些word press站点中，jquery并不总是按照我需要的方式工作。据我所知，我没有犯任何编程错误，但我肯定遗漏了一些东西，因为它似乎工作不正常。首先，我将给出一个可以找到代码的链接

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

Javascript: html:


TEXT1

文本2

最终我会修改它来隐藏和显示不同的文本，但一旦我弄明白了这个问题，我就可以开始了

您不需要设置间隔

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

您不需要设置间隔：

 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调用中？那没有任何意义。

为什么不：

#div1:hover {
    color: red;
}

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

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


文本1
文本2

也许我误解了你的问题，但为什么不使用CSS

：hover

？（您需要为标记，但它会更改悬停颜色）您到底想做什么？一些较旧的浏览器在

上没有问题吗：在某些元素类型上悬停？这就是使用jQuery的好处，它知道如何解决这个问题。不使用CSS hover的目的是，我的意图是最终进行与简单颜色无关的更改。当时在2012年，我还在学习，我正在寻找一种改变鼠标移动的方法，这样我就可以最终将这个想法应用到一个更大的项目中。我得到的第一个答案是我一直在寻找的解决方案。在某些情况下，预先存在的CSS已经定义了一个悬停元素，我可以更动态地指定更改，并执行淡入效果，而不仅仅是更改简单的颜色。我知道这已经是一个很长的时间了。我已经超越了这一点，甚至不记得我为什么要这样做。谢谢。这是一个很好的解决方案，但代码不正确。它应该是onmouseover=“this.**style**.color='red'；”
和onmouseout=“this.**style**.color='black'；”，等等。）这很有效，并且简化了必须调用单独函数的过程，这正是我所寻找的。竖起大拇指。
#div1:hover {
    color: red;
}

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