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;}