a:hover 不包裹子元素

Question

我在锚标记内有 span 和图像，问题是当我将它们悬停时，它们不会作为一个悬停。

<a href="">
      <img src="image"/>
      <span>Shopping Cart</span>
</a>

a :hover {
    opacity: 0.6;
}

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

问题是你的 space 在 a 和 (:)

之间

<a href="">
      <img src="image"/>
      <span>Shopping Cart</span>
</a>

a:hover {
    opacity: 0.6;
}

Answer 2

在 a :hover 中，您正在 select 正在悬停的 <a> 元素的后代。这就是它们分别激活的原因。如果您删除 space (a:hover)，它将 select 悬停在 <a> 上，这就是您想要的。

Answer 3

您可以在 <span> 中包含 <img>：

<a href="">
       <span><img src="image"/>Shopping Cart</span>
</a>

a :hover {
    opacity: 0.6;
}

<a href="">
       <span><img src="image"/>Shopping Cart</span>
</a>

a:hover does not wrap child elements