javascript - CSS 图像悬停帮助

Question

我正在尝试将伪悬停添加到 <a>标签，但没有图像显示在任何一个 css 类中。请告诉我我做错了什么，因为我是 css 的新手。

#AIM a {
    left:420px;
    top:590px;
    position: absolute;
    background-image: url('http://maxk.me/img/aim.png');
}
#AIM a:hover {
    left:420px;
    top:590px;
    position: absolute;
    background-image: url('http://maxk.me/img/aim-hover.png');
}

<a id="AIM" href="http://dribbble.com/_max" />

Answer 1

你 <a>没有宽度或高度，因此没有地方可以显示背景图像。

#AIM a是 id 为 #AIM 的元素内 anchor 标记的选择器就像这个例子:http://jsfiddle.net/Paulpro/5yg7t/ .您要选择带有 id="AIM" 的 anchor 标记在这种情况下，您应该只使用 ID 选择器，因为 ID 是唯一的。使用这个:

#AIM {
    left:420px;
    top:590px;
    position: absolute;
    width: 55px;
    height: 54px;
    background-image: url('http://maxk.me/img/aim.png');
}

#AIM:hover {
    background-image: url('http://maxk.me/img/aim-hover.png');
}

JSFiddle Example