CSS悬停不适用于隐藏元素？答案

【问题标题】：CSS hover not working on hidden elements?CSS悬停不适用于隐藏元素？
【发布时间】：2011-10-02 12:10:32
【问题描述】：

我不确定这里发生了什么，但翻转无法正常工作，我似乎无法弄清楚。

我正在使用非常基本和简单的 css：

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

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

请原谅上帝糟糕的代码。我将其用作一种简单快捷的方法。只需要翻身就可以工作，我很好。

【问题讨论】：

标签： css image styling

【解决方案1】：

您可以使用opacity 属性：

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

【讨论】：

【解决方案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。

【讨论】：

感谢使用您提供的链接中的方法使其正常工作。 =>

【解决方案3】：

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

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


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

【讨论】：

-1 他的代码引用了 CSS 中的 #open{visibility... 和 DOM 中的 <img id="open"...
写“a.open”而不是“a .open”
Alien 我最初将它作为我的代码，但它不起作用。这就是我感到困惑的原因。