:hover 图片交换不起作用答案

【问题标题】：:hover picture swap isn't working:hover 图片交换不起作用
【发布时间】：2015-01-15 23:17:32
【问题描述】：

我做错了什么？根本没有图片显示。 :-/ (fyi我把代码的底部剪掉了，我保证所有的标签都完成了)

在我查看的所有教程中，他们都这样做了，它显示了整个画面。但是当我这样做时，它什么也没显示。如果我在 a 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>

【问题讨论】：

很确定你需要 display:block;在您的个人资料按钮上
背景图片什么时候不显示 - 只在悬停时或一直显示？
请去掉文件名中的那些空格...耸耸肩

标签： css image hover

【解决方案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>

【讨论】：

接受它作为答案。