html - 改变一个 :link background image on a:hover

Question

我试图让链接的背景图片在悬停在链接上时发生变化。本质上，悬停图像是不同的颜色，所以我只是想改变图像的颜色(我知道这是不可能的，所以我只是交换图像)。

显示logo的代码:

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

有没有更好的方法来显示 Logo ，更容易促进悬停？

编辑(添加标题 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 引用图像和其他 Assets 与样式表放在同一目录中，这样您就不需要相对 URI，并且可以将所有内容放在一起。
• 你为什么使用 position: absolute;没有 top/right/bottom/left属性(property)？你想达到什么样的效果？