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