html - 如何在导航栏上设置图像按钮的样式，例如悬停、链接时，图像会改变图案

Question

我想做成悬停、事件和访问时，图像会变成另一个图像，有什么方法吗？

现在我把图片放在背景下，因为当我放图片的时候，字会下来，我想让字重叠在图片上，但是不能...

如果可以，请解释为什么需要这样的样式...我刚刚学会使用 html，所以我想了解更多，谢谢

<div class="navBar" style="margin-left:80px;padding-top:40px;"><!--navBar-->
  <div id="navbar" >
    <div id="navhome" style="width:100px;height:60px; padding-top:30px; padding-left:10px"> <a href="index.html">HOME</a> </div>
  </div>
  <div id="navbar">
    <div id="navhistory" style="width:130px;height:60px; padding-top:30px; padding-left:10px;"> <a href="about.html">ABOUT US</a> </div>
  </div>
  <div id="navbar">
    <div id="navevent" style="width:130px;height:60px; padding-top:30px; padding-left:10px"> <a href="event_1.html">EVENT</a> </div>
  </div>
  <div id="navbar">
    <div id="navcontact" style="width:130px;height:60px; padding-top:30px;"> <a href="contact.html">CONTACT US</a> </div>
  </div>
</div>
<!--navBar-->

CSS:

 .navBar {
    font-family: KaiTi;
    font-size: 22px;
    color: #6c2e13;
    text-align: center;
    float: left;
}

#navbar {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

#navhistory {
    background-image: url(../img/nav2.png);
    background-repeat: no-repeat;
}

#navevent {
    background-image: url(../img/nav3.png);
    background-repeat: no-repeat;
}

#navcontact {
    background-image: url(../img/nav4.png);
    background-repeat: no-repeat;
}

#navhome {
    background-image: url(../img/nav1.png);
    background-repeat: no-repeat;
}

Answer 1

如果您想应用事件的、访问过的样式，首先您需要将背景图像应用到 anchor 标记。这样您就可以轻松地使用 CSS 更新背景图像。目前您正在为 div 应用背景。这意味着您想要在发生悬停、事件或访问操作时修改父元素。使用 CSS，您不能从子元素修改父元素。

所以请检查我的 fiddle ，我已经修改了您的代码并在发生悬停、访问和事件操作时应用了相同的代码。

一些示例代码:

 #navhistory a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navevent a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navcontact a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navhome a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

FIDDLE DEMO