将鼠标悬停在 css 个精灵上

Question

我有这样的主播：

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

ico01 应用带有 CSS 精灵的图像。我想在鼠标悬停时更改锚点内容 (span + i) 的背景颜色，但它只适用于文本 (span)。有没有我遗漏的技巧？

这是一个 JS Fiddle。我不仅需要跨度的背景，还需要包裹图像：

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

提前致谢

Answer 1

你是说？

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

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

Answer 2

试试这个：

a{
   display:block;
}

.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;
}

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

Answer 3

a {
  display:block;
}


a:hover {
background-color:black;
}

Answer 4

您需要为 link 使用 display:block。

将鼠标悬停在 css 个精灵上

mouse over css sprite

html

css

css-sprites