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是标识为#AIM的元素内的锚标记的选择器，如下例所示：http://jsfiddle.net/Paulpro/5yg7t/。您想要选择带有id="AIM"的锚标记，在这种情况下，您应该只使用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

Answer 2

#AIM a匹配 <a>内的#AIM代码。
您需要撰写a#AIM以匹配 <a>的{{1}}代码。

您也可以只写#AIM，因为ID必须是唯一的。

Answer 3

您的<a>标记没有内容，因此它们将是有效的0x0不可见元素。添加一些文字：

<a ...>&nbsp;</a>

或在CSS中给它们一个大小：

a#AIM {
   height: 10px;
   width: 10px;
}

或更好，两者兼而有之。

Answer 4

将css更改为以下

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

将HTML更改为以下

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

Answer 5

尝试添加

display: block;

两个班级;然后尝试指定宽度和高度......

width: 20px;
height: 20px;

Answer 6

A标签不知道您的图像有多大。 A也是一个内联元素，因此它会扩展到其内容的大小（通常是内部文本）。

你需要：

定义宽度和高度（我使用的是300px）
将其设为块元素

{ 显示：块; 宽度：300像素; 高度：300像素; 左：420PX; 顶：590px; 位置：绝对; background-image：url（'http://maxk.me/img/aim.png'）; }

CSS Image Hover帮助

6 个答案: