CODEWITHSUNDEEP
cssimagestyling
L84
L84

Reputation: 46308

CSS hover not working on hidden elements?

I am not sure what is going on here but the rollover is not working correctly and I can't seem to figure it out.

I am using very basic and simple css:

open{visibility:hidden;}
open:hover{visibility:visible;}

http://www.ubhape2.com/messages/files/chameleon/ is the page i am working on

Please forgive the god awful code. I am using it as a simple and quick method. Just need the roll over to work and I am good.

Upvotes: 12

Views: 14301

Answers (3)

Peyman
Peyman

Reputation: 3138

Try below code, should work fine

a.open{visibility:hidden;} 
a.open:hover{visibility:visible;}


<a class="open" href="">Open</a>

Upvotes: -1

balping
balping

Reputation: 8008

You can use the opacity property:

.open{opacity:0;}
.open:hover{opacity:1;}

Upvotes: 39

g_thom
g_thom

Reputation: 2810

The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).

The solution posted there is also a good alternative for this issue. There are lots of other ways to do it though, such as a div with an image in the background, like:

<style> 
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>

Or if you need to use an image, you can use image sprites (http://www.alistapart.com/articles/sprites)

See basic jsfiddle.

Upvotes: 6

Related Questions