a的不透明度转换：悬停不起作用

Question

我希望链接的所有元素都显示一致的行为。

 a:hover { opacity: 0.5; }

这适用于IE和Firefox，但不透明度（以及相关的CSS转换）未正确应用于Chrome和Safari中<a>标记的子元素。如果我将<div>的明确规则添加为子元素，则可以在Chrome和Safari中使用：

 a:hover, a:hover div { opacity: 0.5; }

到目前为止一直很好，之前已经被问过并回答过。我遇到的问题是，通过添加包含<div>的规则，不透明度在IE和Firefox中应用两次，使元素过于透明。

我需要涵盖两种情况 - <a>包装<div>或不包含{{1}}，而不需要编写大量明确的CSS规则。我怎样才能做到这一点？

http://liveweave.com/fMsz7m

Answer 1

在Safari中对我有用的是将display: block添加到标记

中

a:hover {                       
  opacity: 0.5;
  transition:  opacity 0.2s ease;
  display: block;
}

Answer 2

我不确定这是否可以作为您问题的直接解决方案（我不确定为什么孩子不会继承），但您可以将display: block添加到a中你的css会起作用（用Firefox和Chrome测试）。

<强> JSFiddle DEMO

另一种方法是将悬停分配给<div>的父<a>。

<强> JSFiddle DEMO

我觉得那里有更好的解决方案/解释，也许这个会给别人带来一个想法。