a：悬停不会包装子元素

Question

我在锚标记中有跨度和图像，问题是当我悬停它们时它们不会像一个一样悬停。

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

a :hover {
    opacity: 0.6;
}

Fiddle

任何帮助将不胜感激。谢谢。

Answer 1

问题是a和（:)之间的空间

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

a:hover {
    opacity: 0.6;
}

参见演示http://jsfiddle.net/JentiDabhi/7ondpajd/

Answer 2

在a :hover中，您正在选择正在悬停的<a>元素的后代。这就是他们单独激活的原因。如果您删除空格（a:hover），则会选择正在悬停的<a>，这就是您想要的。

Answer 3

您可以在<img>中添加<span>：

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

＆＃13;

＆＃13;

a :hover {
    opacity: 0.6;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;