更改a：链接的背景图像：hover

我想要获取背景图像，以便在链接悬停时更改链接。基本上，悬停图像是一种不同的颜色，所以我只是想改变图像的颜色（这是不可能的，我不知道，所以我只是交换图像）。更改a：链接的背景图像：hover

的代码标识显示：

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

来源

2012-12-12 josiahwiebe

css sprite。将两个图像组合成一个具有并排徽标的图像。要设置悬停的风格，请使用“background-position”定位背景图像。这节省了一个http请求。 – Jrod

改变它从#logo a:hover到#logo:hover，因为你的<a>元素是的#logo元素。

此外，其他一些小窍门：

缩进你的CSS，以使其更容易除了选择和其他规则集是告诉属性。
将CSS引用的图片和其他资源保存在样式表所在的目录中，这样您就不需要相对URI并将所有内容都保存在一起。
为什么使用position: absolute;没有top/right/bottom/left属性？你想达到什么效果？

来源

2012-12-12 02:19:17 Dai

啊！非常好的一点。 CSS通常在我的编辑器中缩进，在发布到此网站时丢失了这些缩进。我使用'position：absolute'来保持我的标志图像和我的标题对齐。徽标左对齐，标题对齐右边。我已经附加了我的问题头CSS。 – josiahwiebe

更改a：链接的背景图像：hover

回答

相关问题