我希望使用纯 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>
最终我会对其进行修改以隐藏和显示不同的文本，但一旦我想通了这一点我就会开始。
最佳答案
您可以简单地使用此代码:
<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>
关于javascript - 鼠标悬停时更改文本颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13168292/