CSS hover not working on hidden elements?

You can use the opacity property:

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

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.