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>
- 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
4 Answers
Reset to default 3CSS:
.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.