：悬停图片交换不起作用

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>