CSS悬停不在隐藏元素上？

Question

我不知道这里发生了什么,但翻滚工作不正常,我似乎无法弄明白.

我使用非常基本和简单的CSS:

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

http://www.ubhape2.com/messages/files/chameleon/是我正在处理的页面

请原谅上帝可怕的代码.我正在使用它作为一种简单快捷的方法.只需要翻转工作,我很好.

Answer 1

您可以使用该opacity属性:

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

Answer 2

问题是您不能将鼠标悬停在隐藏元素上（请参阅为什么 CSS 可见性不起作用？）。

那里发布的解决方案也是这个问题的一个很好的替代方案。不过，还有很多其他方法可以做到这一点，例如在背景中带有图像的 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。