Javascript 悬停时更改div标记内文本的字体颜色

当用户将鼠标悬停在文本上时，我试图更改文本的颜色并在其下方加下划线

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

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

.container{width:100px；float:left；background:#e2edf9；overflow:hidden；}
.content{宽度：10px；高度：20px；光标：指针；颜色：黑色；}
.content:悬停{颜色：橙色；}
**EWR**
**NRT**

这有什么问题

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

.container{width:100px；float:left；background:#e2edf9；overflow:hidden；}
.content{宽度：10px；高度：20px；光标：指针；颜色：黑色；}
.content:hover{color:#FFFFFF；文本装饰：下划线；}
**EWR**
**NRT**
​

演示：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;}

​并非所有浏览器都接受文字作为颜色，请尝试使用十六进制代码或rgb（）

见：

更新：

我觉得奇怪很好：

---

在IE中，必须声明：悬停选择器才能在元素以外的其他元素上工作

---

我不太确定：除了链接之外的元素上的悬停支持这把小提琴在IE8中对我有效，除了在怪癖模式下运行时，你有怪癖模式吗

---

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

旧浏览器（如IE6及以下版本）不支持：hover伪类。。但这不应该成为问题。仍然为IE6开发是愚蠢的。我很确定IE6问题到现在已经无关紧要了，因为它几乎没有被使用过。你的风格很好。确保文档中首先有html声明（）。其余的都应该是有效的HTML。对于这样的代码片段，它不会工作，因为它不是一个有效的HTML文档。@GolezTrol好的，我们现在知道它的IE8，但由于问题中的代码是有效的和正确的，问题很可能很好，不管是否愚蠢，就是OP将IE6用于那些说“为IE6开发很愚蠢”或“IE6问题无关紧要”的人：告诉100.000.000+中国IE6用户；o） 我不知道你可以在你提供的网站上试用你的代码。它在JSFIDLE中运行良好，但当我在机器上运行相同的代码时，字体颜色不会改变，也不会加下划线。可能是因为我用的是IE8吗？是的，这是可能的。试着使用十六进制代码（比如白色的#FFFFFF）应该没关系。使用

orange

在IE8中应该可以正常工作。您需要向我们展示您的全部代码。可能您缺少一个DOCTYPE或其他导致错误的东西。@Chris我尝试了十六进制代码，但它也不起作用。我在原始问题中添加了doctype。我使用的是IE8。我将颜色更改为十六进制代码，但它仍然无法工作？当所有其他操作都失败时，我将尝试使用javascript。谢谢。我可以使用javascript。但我不确定什么是怪癖模式？怪癖模式，你可以告诉IE使用开发工具运行哪个兼容模式。

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