Question

我有一个像这样的锚：

<a href="#">
   <i class="ico01"></i>
   <span>Text</span>
</a>

ico01应用带有CSS精灵的图像。我想在鼠标上更改锚内容（span + i）的背景颜色，但它只适用于文本（span）。我有什么诡计吗？

这是一个JS小提琴。我不仅需要跨度背景，还要包装图像：

https://jsfiddle.net/0esbmusq/1/

提前致谢

Answer 1

a {
  display:block;
}


a:hover {
background-color:black;
}

Answer 2

试试这个：

a{
   display:block;
}

＆＃13;

.ico01 {
  background: url('https://download.seaicons.com/icons/marcus-roberto/google-play/512/Google-Chrome-icon.png') no-repeat -10px -24px;
  width: 492px;
  height: 488px;
  display:block;
}
a{
  display:block;
}
a:hover {
  background-color:red;
}

＆＃13;

<a href="#">
  <span>Google</span>
  <i class="ico01"></i>
</a>

＆＃13;

Answer 3

你的意思是？

a:hover span{background-color:black};

<a href="#">
   <i class="ico01"></i>
   <span>Text</span>
</a>

Answer 4

您需要使用display：block作为链接。

鼠标悬停在css精灵上

4 个答案: