1

我正在尝试获取背景图像以在链接悬停时更改链接。本质上,悬停图像是一种不同的颜色,所以我只是想改变图像的颜色(我知道这是不可能的,所以我只是交换图像)。

显示标志的代码:

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

1 回答 1

0

将其从 更改#logo a:hover#logo:hover,因为您的元素<a>就是元素#logo

此外,还有一些其他提示:

  • 缩进你的 CSS 以便更容易地将属性与选择器和其他规则集区分开来。
  • 将您的 CSS 引用的图像和其他资产与样式表放在同一目录中,这样您就不需要相对 URI 并将所有内容放在一起。
  • 你为什么在position: absolute;没有top/right/bottom/left属性的情况下使用?你想达到什么效果?
于 2012-12-12T02:19:17.150 回答