我试图让链接的背景图片在悬停在链接上时发生变化。本质上,悬停图像是不同的颜色,所以我只是想改变图像的颜色(我知道这是不可能的,所以我只是交换图像)。
显示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;
}
最佳答案
将其从 #logo a:hover
更改为至 #logo:hover
,因为你的 <a>
元素是 #logo
元素。
此外,还有一些其他提示:
- 缩进您的 CSS,以便更轻松地将属性与选择器和其他规则集区分开来。
- 将您的 CSS 引用图像和其他 Assets 与样式表放在同一目录中,这样您就不需要相对 URI,并且可以将所有内容放在一起。
- 你为什么使用
position: absolute;
没有top/right/bottom/left
属性(property)?你想达到什么样的效果?
关于html - 改变一个 :link background image on a:hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13831635/