2015-10-18 95 views
0

我有一个导航栏设置了一些链接。整个链接区域应该突出灰色,并且它曾经工作过。然后,我决定以更好的方式构建我的导航栏并重新编写它,但a:hover不再适用。突出显示链接不工作

同一代码:

a { 
 
    text-decoration:none; 
 
} 
 
a:link { 
 
    color:green; 
 
} 
 
a:visited { 
 
    color:white 
 
} 
 
.idfour, 
 
.idfive a:hover { 
 
    background-color:#A8B1A9 !important; 
 
    color: white; 
 
}
<nav> 
 
    <div class="total"> 
 
     <ul> 
 
      <li> 
 
       <div style="overflow: auto"> 
 
        <div class="idtwo" style="width:15%;display:block;border-left: 1px solid white;padding:0;font-size:12px;float:right;margin-right:0px"> 
 
         <a href="logoff.php" style="border-right:none"><p style="margin-top:15px"><b>Logout</b></p></a> 
 
        </div> 
 
        <div class="idthree" style="width:20%;display:block;border-right:1px solid white;border-left: 1px solid white;padding:0;font-size:12px;float:right"> 
 
         <a href="myaccount.php"><p style="margin-top:15px"><b>My account</b></p></a> 
 
        </div> 
 
        <div class="idfour" style="width:20%;display:block;border-right:1px solid white;border-left: 1px solid white;padding:0;font-size:12px;float:right"> 
 
         <a href="myprofile.php"><p style="margin-top:8px"><b>My Profile</b></p></a> 
 
        </div> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>

+0

请发布你的jsfiddle。 – Alex

+1

** idfive **在哪里? – SHAZ

回答

2

Demo

添加类.hoverlink(或任何你想将它命名)与idtwo,idthree以来,idfour

所以你的HTML看起来像这样

<nav> 
<div class="total"> 
<ul> 
<li> 
<div style="overflow: auto"> 
<div class="idtwo hoverlink" style="width:15%;display:block;border-left: 1px solid white;padding:0;font-size:12px;float:right;margin-right:0px"> 
<a href="logoff.php" style="border-right:none"><p style="margin-top:15px"><b>Logout</b></p></a> 
</div> 
<div class="idthree hoverlink" style="width:20%;display:block;border-right:1px solid white;border-left: 1px solid white;padding:0;font-size:12px;float:right"> 
<a href="myaccount.php"><p style="margin-top:15px"><b>My account</b></p></a> 
</div> 
<div class="idfour hoverlink" style="width:20%;display:block;border-right:1px solid white;border-left: 1px solid white;padding:0;font-size:12px;float:right"> 
<a href="myprofile.php"><p style="margin-top:8px"><b>My Profile</b></p></a> 
</div> 
</div> 
</li> 
</ul> 
<div class="total"> 
</nav> 

,然后写CSS

.hoverlink:hover { 
background-color:#A8B1A9 !important; 
color: white; 
} 

解决方案是非常简单的,直接添加到:hover类。

IMO你应该看看:hover是如何工作的。 This会帮你出来

+0

非常感谢,解决了它! – Nockingam