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

如果您想要悬停效果，请在该元素上使用:hover psaudo-class，然后更改背景图片。 JSFiddle

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

.button:hover{
   background: url(../img/nav1_hover.png) no-repeat;
}

注意：不要直接设置元素（直接写入style属性。由于您有重复元素，请使用class='someClass subclass sub-subclass'而不是仅将.css文件中的样式应用于所有该类的元素：

.someClass {
     width: 10px;
     height: 20.5%;
     padding: 0;
     margin: .5em;
}

.someClass.even {
     color: red;
}

.someClass.odd {
     color: green;
}

Answer 2

首先，如果您想应用活动的，访问过的样式，则需要将背景图像应用于锚标记。这样您就可以使用CSS轻松更新背景图像。目前你正在申请div的背景。这意味着您希望在发生悬停，活动或访问操作时修改父元素。使用CSS，从子元素中无法修改父元素。

因此，检查我的小提琴我修改了你的代码并在发生悬停，访问和主动行动时应用了相同的代码。

一些示例代码：

 #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

如何在导航栏上设置图像按钮，就像悬停，链接时，图像会改变图案

2 个答案: