CSS懸停不能在隱藏的元素上工作？

Question

我不確定這裏發生了什麼，但翻車工作不正常，我似乎無法弄清楚。

我使用很基本的，簡單的CSS：

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

http://www.ubhape2.com/messages/files/chameleon/是我在

工作頁面請原諒神可怕的代碼。我正在使用它作爲一種簡單快捷的方法。只需要滾動工作，我很好。

Answer 1

的問題是，你不能一個隱藏的元素懸停（見Why isn't CSS visibility working?）。

發佈的解決方案也是這個問題的一個很好的選擇。有很多其他的方法來做到這一點，雖然，如在背景圖像的DIV，如：

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

或者，如果你需要使用的圖像，你可以使用圖片精靈（http://www.alistapart.com/articles/sprites）

查看基本的jsfiddle。

Answer 2

嘗試下面的代碼，應該工作正常

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


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

Answer 3

可以使用opacity屬性：

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