在CSS中同时使用After和Hover

Question

为了展示指向外部页面的链接，我使用CSS中的after属性在文本后面添加了一个小的GIF。

.[style]:after{content:url(../images/main/externallink.gif)}

问题在于当需要在鼠标悬停时改变图像颜色时，以下代码虽然有效，但会将新图像添加到第一张图像而非替换它！

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

你有什么方法可以让原始的“after”图片消失，或者提出完全不同的实现方式吗？

- Matt Bowyer

---

.[style] 和 a:hover 之间有空格吗？ - kalpaitch

如果 a:hover, a:after .. - Aldi Unanto

在第一条语句中，你有 .[style]:after，而在第二条语句中，你有 .[style] a:hover:after。它们的结构不同，因此在两个不同的状态下将无法匹配相同的元素。 - Brendan Bullen

Answer 1

您正在将悬停图片应用于不同于初始图片的元素。

如果将两个图片都应用到链接上，您应该可以获得所需的行为：

.[style] a:after{content:url(../images/main/externallink.gif)}

.[style] a:hover:after{content:url(../images/main/externallinkover.gif)}

（询问：我想知道您使用的选择器是否实际为.[style]？）

- Paul D. Waite

---

太好了 - 它完美地工作了，谢谢。 （不，我实际上并没有称呼我的风格为“[style]”！） - Matt Bowyer

@MattBowyer: 好耶！当然 - [style] 这么写有点令人困惑，因为它实际上是一个 CSS 选择器（具体来说，是 属性选择器）。 - Paul D. Waite