html - 使用 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/