Question

我正在尝试获取背景图片，以便在链接悬停时更改链接。基本上，悬停图像是一种不同的颜色，所以我只是想改变图像的颜色（这是我知道的任何方式都不可能的，所以我只是交换图像）。

显示徽标的代码：

<a href="/" id="logo"></a>

CSS：

#logo {
position: absolute;
display: block;
margin-top: 10px;
margin-left: 10px;
background: url('../img/logo.png') no-repeat;
width: 60px;
height: 60px;
}

#logo a:hover {
background: url('../img/logo-blue.png') no-repeat;
}

有没有更好的方式让我显示更容易促进此悬停的徽标？

编辑（添加标题CSS）：

#header {
height: 75px;
text-align: right;
position: relative;
}

#header h2 {
font-size: 2.5em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: 15px;
}

Answer 1

将其从#logo a:hover更改为#logo:hover，因为您的<a>元素 #logo元素。

另外，还有一些其他提示：

缩进CSS以便更容易区分选择器和其他规则集。
将CSS引用的图像和其他资源保存在与样式表相同的目录中，这样您就不需要相对URI，并且可以将所有内容保存在一起。
为什么在没有position: absolute;属性的情况下使用top/right/bottom/left？你想要达到什么效果？

在a：hover上更改a：链接背景图像

1 个答案: