a:hover 的不透明度过渡不起作用答案

【问题标题】：Opacity transition for a:hover not workinga:hover 的不透明度过渡不起作用
【发布时间】：2014-08-18 01:24:35
【问题描述】：

我希望所有作为链接的元素都表现出一致的行为。

 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 规则。我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

我觉得好像有更好的解决方案/解释，也许这个会激发其他人的想法。

【讨论】：