如何为图像链接设置特定的CSS类？

Question

这看起来非常简单，但我无法理解如何做到这一点：

我希望我网站上的每个链接都有鼠标悬停的特定样式，所以我使用

a:hover {
 /*style goes here*/
}

问题是，我不希望将该样式应用于图像链接，但

a:hover img {
 /*reset style*/
}

不起作用。我该怎么办呢？

Answer 1

您的尝试是重新设置图像元素，而不是a元素，这就是它不起作用的原因（有关CSS选择器语法的说明，请参阅here）。不幸的是，没有选择元素父级的语法，正如其他人所说，你必须为图像链接创建一个特殊的类。

Answer 2

对于作为图像的链接，请使用不同的css类，而不是引用所有锚标记。

Answer 3

这样做的唯一方法是在a s上放置一个包含img s的类，如下所示：

<a href="link.htm" class="imagelink"><img src="image.jpg" alt="Image" /></a>

然后在CSS中用

选择它

a.imagelink:hover {
    /* styles */
}

Answer 4

试试这个：

a:hover {
 /*link style goes here*/
}

悬停时选择包含链接的所有图像并设置其他样式。

a:link:hover img {
    /* hovered, linked image styles */
}

这将仅选择具有链接并悬停的图像。

也在Weebly工作。