如何通过 CSS 在翻转时同时更改文本和图像？答案

【问题标题】：How to make both text and image change on rollover via CSS?如何通过 CSS 在翻转时同时更改文本和图像？
【发布时间】：2012-05-15 13:46:15
【问题描述】：

我有一个带有图标的顶部菜单 - 在它下方是图标的文本。

----------      -----------
|        |      |         |
|  icon  |      |    ?    |
----------      -----------
   Text          Questions

<li class="questions">
    <a href="/questions" id="questions">
    <i class="questions_icon"></i>
    Questions
    </a>
</li>

使用精灵我在 :hover 上更改了图标。我还在 :hover 上更改了文本颜色。

但是，我想知道是否有可能：

文字悬停时更改图标 -- 和
在图标悬停时更改文本。

单独使用 CSS 是否可行？

【问题讨论】：

是的，但是您需要添加更多的 html 以在悬停时在多个跨度之间切换。你会想要预想文本，并使跨度可见，而另一个不可见。使用 css 悬停时更改这些属性。
我可能在这里落后于时代，但是什么？
只是用作背景图像占位符的标记——曾经是 italic——这在 Twitter 和 FB 上经常使用（占位符）跨度>
那么你要把文本改成什么？
我对情况的理解有误吗？为什么不将鼠标悬停在li .questions 上以定位文本和图标？即当.questions 悬停时（包含图标和文本）两者都会改变。

标签： jquery html css hover css-sprites

【解决方案1】：

演示（无图片）：http://jsfiddle.net/kFkcV/

.container::after {
  content: "Hello World";
}

.container::before {
  content: /images/icon1.png;
}

.container:hover:after {
  content: "Hover World!";
}

.container:hover:before {
  content: /images/icon2.png;
}

【讨论】：

content 属性，糟糕！
那么content 是怎么回事...从来没有使用过它，想知道在 IE7-8 上是否可以正常运行...有什么缺点吗？

【解决方案2】：

所以是这样的：

.questions:hover i {
    background-image: url(...);
}
.questions:hover {
    color: red;
}

【讨论】：