admin 管理员组

文章数量: 1086019

I am trying to change the color of the text and underline it, when a user hovers over a text.

I tried the following and it doesn't work. I did look for a solution all over the internet and I didn't find any that suited my particular need. 

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

I am trying to change the color of the text and underline it, when a user hovers over a text.

I tried the following and it doesn't work. I did look for a solution all over the internet and I didn't find any that suited my particular need. 

<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>
  • javascript
  • html
  • css
Share Improve this question edited Sep 11, 2012 at 20:57 David Passmore 6,0894 gold badges48 silver badges70 bronze badges asked Sep 11, 2012 at 20:55 SusieSusie 5,15811 gold badges56 silver badges74 bronze badges 11
  • 4 the :hover pseudo-class is not supported by older browsers, like IE6 and below – Muleskinner Commented Sep 11, 2012 at 21:02
  • 4 .. but that shouldn't be an issue. Still developing for IE6 is silly. – GolezTrol Commented Sep 11, 2012 at 21:22
  • 1 I'm pretty sure IE6 issues are irrelevant by now, as it's barely used. Your style is fine. Make sure you have html declaration (<!DOCTYPE html> ) first thing in your document. And all the rest should be valid HTML. On a snippet like that it won't work as it's not a valid HTML document. – AR. Commented Sep 11, 2012 at 21:26
  • 1 @GolezTrol OK we now know its IE8, but as the codes in the question is valid and correct the issue could very well, silly or not, have been that the OP used IE6 – Muleskinner Commented Sep 11, 2012 at 21:29
  • 1 To those who says that "developing for IE6 is silly" or that "IE6 issues are irrelevant": tell it to the 100.000.000+ Chinese IE6 users ;o) – Muleskinner Commented Sep 12, 2012 at 7:33
 |  Show 6 more ments

4 Answers 4

Reset to default 3

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

​Not all browsers accept words as colors try using HEX-code or rgb().

See: http://jsfiddle/davcpas123/3S4xN/2/

Update:

Strange seems fine to me:

In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.

I'm not so sure about :hover support on elements other than link in <IE6.

If push es to shove there is always your javascript whip:

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

What's wrong with this?

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

Demo: http://jsfiddle/m4m7B/1/

This fiddle works for me in IE8, see fiddle here, except when running in quirks mode, do you have quirks mode on?

Is javascript an option, seems like the best solution for you.

本文标签： javascriptChange the font color of text inside div tag on hoveringStack Overflow

版权声明：本文标题：javascript - Change the font color of text inside div tag on hovering - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744024464a2520386.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。