CSS hover not working on hidden elements?

Question

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.

Answer 1

You can use the opacity property:

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

Answer 2

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.