javascript - 悬停时更改 div 标签内文本的字体颜色

Question

当用户将鼠标悬停在文本上时，我正在尝试更改文本的颜色并为其添加下划线。

我尝试了以下方法，但它不起作用。我确实在整个互联网上寻找了解决方案，但没有找到适合我特殊需求的解决方案。

<style type="text/css">
    .container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
    .content {width: 10px; height:20px; cursor: pointer; color: black; }
    .content:hover{color: orange;}
</style>

<div class="container">
    <div class="content" onclick="search(this)" >**EWR**</div>
    <div class="content" onclick="search(this)" >**NRT**</div>
</div>

Answer 1

CSS：

.container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
.content {width: 10px; height:20px; cursor: pointer; color: #000000; }
.content:hover{color: #FFA500; text-decoration: underline;}

并非所有浏览器都接受文字，因为颜色尝试使用 HEX 代码或 rgb()。

见：http: //jsfiddle.net/davcpas123/3S4xN/2/

更新：

奇怪对我来说似乎很好：

Answer 2

在 IE 中，必须为 :hover 选择器声明一个 <!DOCTYPE> 才能作用于 <a> 元素以外的其他元素。

我不太确定 :hover 对 <IE6 中链接以外的元素的支持。

如果迫在眉睫，总会有你的 javascript 鞭子：

<div class="content" onmouseover="this.style.color = 'orange'" onmouseout="this.style.color = 'black'" ></div>

Answer 3

这有什么问题？

<style type="text/css">
    .container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
    .content {width: 10px; height:20px; cursor: pointer; color: black; }
    .content:hover{color: #FFFFFF;text-decoration:underline;}
</style>

<div class="container">
    <div class="content" onclick="search(this)" >**EWR**</div>
    <div class="content" onclick="search(this)" >**NRT**</div>
</div>​

演示：http: //jsfiddle.net/m4m7B/1/

Answer 4

这个小提琴在 IE8 中对我有用，看这里的小提琴，除了在 quirks 模式下运行时，你有 quirks 模式吗？

javascript 是一个选项吗，似乎是最适合您的解决方案。