CSS Image Hover幫助

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元素內錨標簽的選擇器，如下例所示： 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示例

Answer 2

#AIM a匹配#AIM 內的 <a>標簽。
你需要寫a#AIM匹配<a>標簽是 #AIM 。

您也可以編寫#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）

• 使它成為一個塊元素

  {display：block; 寬度：300像素; 高度：300像素; 左：420PX; 頂：590px; 位置：絕對; background-image：url（'http://maxk.me/img/aim.png'）; }