使用 css 设置不透明度：hover 不适用于子元素

Question

我试图在鼠标悬停在 div 上方时显示链接，但我无法让它工作。

HTML：

<div class="rendezvous" style="position: relative">
    <img src="http://placehold.it/50x50" />
    <div class="remover" style="width: 32px; position: absolute; top: 0px; left: 15px; opacity: 0;">
        <a href="#">Link</a>
    </div> 
</div>

CSS：

.rendezvous:hover .remover {
    opacity: 0.5;
}

JSFiddle：http://jsfiddle.net/6uLTr/

奇怪的是css选择器可以工作，例如我可以通过设置边框来测试它。但是当我设置不透明度时，同样的方法不起作用。我在这里做错了什么？

Answer 1

style 属性中的规则比作者样式表中定义的规则具有更高的优先级。您可以使用opacity: 0.5 !important（不是最好的主意），也可以在样式表中定义其他规则。

http://jsfiddle.net/6uLTr/1/