Zawieszanie CSS nie działa na ukrytych elementach? - css, obraz, stylizacja

Nie jestem pewien, co się tutaj dzieje, ale rollover nie działa poprawnie i nie mogę tego zrozumieć.

Używam bardzo prostych i prostych css:

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

http://www.ubhape2.com/messages/files/chameleon/ jest strona, nad którą pracuję

Proszę, wybacz brzydkiemu kodowi boga. Używam go jako prostej i szybkiej metody. Po prostu potrzebuję przewrócenia się do pracy i jestem dobry.

Odpowiedzi:

Problem polega na tym, że nie można najechać myszką na ukryty element (patrz Dlaczego nie działa widoczność CSS?).

Zamieszczone tam rozwiązanie jest dobrą alternatywą dla tego problemu. Istnieje jednak wiele innych sposobów, takich jak div z obrazem w tle, takich jak:

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

Lub jeśli potrzebujesz użyć obrazu, możesz użyć duszków obrazu (http://www.alistapart.com/articles/sprites)

Zobacz podstawowe jsfiddle.

Możesz użyć opacity własność:

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

Spróbuj poniżej kodu, powinien działać dobrze

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


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