2 replies [Last post]
rjt
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-09-07
Posts: 4
Points: 0

I have read frequently that IE supports the :hover pseudo-class, but only for anchor tags. However, whatever I try I can't seem to get it working.

For example, here I am trying to get some text to appear when I hover over an image. The code validates, and works in Firefox and Opera7, but not in IE.

I assume I'm making a fundamental mistake, but can't spot it for the life of me, so... help?

<html>
<head>
<title>test</title>

<style type="text/css">
.pop { display:none; }
a:hover .pop { display:inherit; }
</style>

</head>
<body>

<p>
<a href="foo.html">
<img src="foo.jpg" alt="foo" />
<span class="pop">hello, world</span>
</a>
</p>

</body>
</html>

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

help me understand IE :hover

You can try that and adapt it to your pages

<html>
<head>
<title>test</title>
<style type="text/css">
a span.pop { display:none;visibility:hidden; }
a:hover span.pop{ display:inline;visibility:visible; }
p a:hover{background-color:#A9CFFE;}/*any new rule is needed by IE*/
</style>
</head>
<body>
<p>
<a href="foo.html"><img src="foo.jpg" alt="foo">test <span class="pop">hello,
world</span>
</a></p>
</body>
</html>

rjt
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-09-07
Posts: 4
Points: 0

help me understand IE :hover

Thank you very much indeed. I googled for an age trying to find a solution.