<span> inside <a> - broken underline hover (IE)
Posted: 08 August 2005 10:35 AM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2005-08-08

The following code (which you can copy and paste as a complete file) works in Gecko browsers and Opera, but not IE.
What I’m trying to achieve is a single hyperlink for which some text underlines when hovered over, but the rest of the text does not (despite being part of the hyperlink).  Does anyone know how this can this be achieved in Internet Explorer?

<html>
<
head>
<
style>
a {
text
-decorationnone;
}
a
:hover .test2 {
text
-decorationunderline;
}
</style>
</
head>
<
body>
        <
a href="#"><span class="test2">One</spanTwo</a>
</
body>
</
html>

Many thanks in advance for any help or ideas you can provide.

Profile
 
 
Posted: 08 August 2005 11:07 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  2
Joined  2005-08-08

Solved: <span> inside <a> - broken underline hover (IE)

IE ignores an “a:hover .test2” definition if an “a:hover” definition does not exist (and the “a:hover” style must contain style definitions for this fix to work).  So, here’s the solution ("text-indent:0px;" could be anything):

<html>
<
head>
<
style>
a {
text
-decorationnone;
}
a
:hover {
text
-indent:0px;
}
a
:hover .test2 {
text
-decorationunderline;
}
</style>
</
head>
<
body>
        <
a href="#"><span class="test2">One</spanTwo</a>
</
body>
</
html>

Profile
 
 
Posted: 18 June 2011 02:42 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  4
Joined  2011-01-28

Thank you soo much for sharing this solution :) I’ve literally spent the last couple of days searching everywhere for this and finally I’ve come across it and it works perfectly. Thanks again, Much appreciated!

Profile