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>

，而无需编写大量显式 CSS 规则。我怎样才能做到这一点？

Answer 1

在 Safari 中对我有用的是将

display: block

添加到 a 标签中

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

Answer 2

我不确定这是否算作您问题的直接解决方案（我不确定为什么孩子们不继承），但您可以将

display: block

添加到 css 中的

中，这将起作用（使用 Firefox 和 Chrome 进行测试）。

另一种方法是将悬停分配给

<div>

，即

<a>

的父级。

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