：懸停圖片交換不起作用

Question

我在做什麼錯？沒有圖片顯示。 ： - /（我切斷了代碼的底部，標籤全部完成，我保證）

在所有的教程中，我看着他們做了這件事，它展示了整個圖片。但是當我這樣做的時候它什麼都沒有顯示。如果我在一個href標籤裏鍵入文本，它會顯示文本背後的圖片的一部分，但沒有其他的東西。

CSS：

body { 
    background-color: #ebf4f7; 
    background-image: url(bg.png); 
    background-repeat: repeat-x; 
} 
#mainnav { 
    position: relative; 
    top: -9px; 
    left: -2px; 
    width: auto; 
    padding-right: 0%; 
    padding-left: 0%; 
} 
    .profilebutton { 
    background-image: url(button%20profile.png); 
    background-position: 0px 0px; 
    height: 71px; 
    width: 113px; 
} 
.profilebutton:hover { 
    background-image: url(button%20profile.png); 
    background-position: 0px 100%; 
    height: 71px; 
    width: 113px; 
} 

HTML：

<nav id="mainnav"> 
    <a href="my_profile.html" class="profilebutton"></a> 

Answer 1

<a>是一個內聯元素，所以你必須給物業display: block;您<a>元素，如果你不打算加入任何文字：Fiddle

.profilebutton { 
    display:block; 
    background-image: url('http://placekitten.com/300/303'); 
    background-position: 0px 100%; 
    height: 71px; 
    width: 113px; 
} 

body { 
 
    background-color: #ebf4f7; 
 
    background-image: url('http://placekitten.com/300/301'); 
 
    background-repeat: repeat-x; 
 
} 
 
#mainnav { 
 
    position: relative; 
 
    top: -9px; 
 
    left: -2px; 
 
    width: auto; 
 
    padding-right: 0%; 
 
    padding-left: 0%; 
 
} 
 
.profilebutton { 
 
    display:block; 
 
    background-image: url('http://placekitten.com/300/302'); 
 
    background-position: 0px 0px; 
 
    height: 71px; 
 
    width: 113px; 
 
} 
 
.profilebutton:hover { 
 
    display:block; 
 
    background-image: url('http://placekitten.com/300/303'); 
 
    background-position: 0px 100%; 
 
    height: 71px; 
 
    width: 113px; 
 
}

<nav id="mainnav"> 
 
<a href="my_profile.html" class="profilebutton">nbvnbvnchdfg</a>