css - :hover not working 的不透明度转换

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

 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>，无需编写大量明确的 CSS 规则。我怎样才能做到这一点？

http://liveweave.com/fMsz7m

最佳答案

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

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

关于css - :hover not working 的不透明度转换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24443268/