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

问题是你不能将鼠标悬停在隐藏元素上（参见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 3

尝试下面的代码，应该可以正常工作

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


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

CSS悬停不在隐藏元素上？

3 个答案: