鼠标悬停时更改文本颜色
[英]Change Text Color on mouseover
问题描述
I'm hoping to accomplish this using pure CSS and Javascript. 
我希望使用纯CSS和Javascript来实现这一目标。 I'm ok with PHP as well. 我也熟悉PHP。 I'm avoiding jquery because I'm trying to learn javascript a bit more and I've found that in some word-press sites jquery doesn't always work the way I need it to. 我正在避免使用jquery，因为我正在尝试更多地学习javascript而且我发现在某些word-press网站中，jquery并不总是按照我需要的方式工作。 As far as I can tell I haven't made any programmatic errors, but I must be missing something because it doesn't seem to be working correctly. 据我所知，我没有做任何程序错误，但我必须遗漏一些东西，因为它似乎没有正常工作。 First I'll give a link where the code can be found. 首先，我将给出一个可以找到代码的链接。 http://jsfiddle.net/FFCFy/13/ http://jsfiddle.net/FFCFy/13/
Next I'll give the actual code. 接下来我将给出实际的代码。
Javascript: 使用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：
<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>
Eventually I'll be modifying this to hide and show different text, but I'll get to that once I have this figured out. 最终我将修改它以隐藏和显示不同的文本，但是一旦我弄明白，我就会明白这一点。
5 个解决方案
解决方案1
6 2014-07-12 13:29:00
You can use simply this code: 你可以使用这个代码：
<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>
解决方案2
3 2012-10-31 22:32:28
why not just: 为什么不呢：
#div1:hover {
color: red;
}
解决方案3
2 已采纳 2012-10-31 22:27:09
You don't need the setInterval . 您不需要setInterval 。
function stext() {
var x = document.getElementById("div1");
var y = document.getElementById("div2");
x.style.color = 'red';
y.style.color = 'black';
}
Updated Working JSFiddle 更新工作JSFiddle
解决方案4
0 2012-10-31 22:27:12
You don't need setInterval: 你不需要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
0 2012-10-31 22:29:57
Your functions htext and stext are defined inside an anonymous function, and therefore not globally available. 您的函数htext和stext是在匿名函数内定义的，因此不是全局可用的。 Move the function definitions outside the anonymous function, or assign the functions to the global object (window) so they're available. 将函数定义移到匿名函数之外，或将函数分配给全局对象（窗口），以便它们可用。
But then again... Why is this code inside a setInterval call anyway? 但话又说回来......为什么这个代码在setInterval调用中呢？ That doesn't make any sense. 这没有任何意义。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.