突出顯示鏈接不工作

我有一個導航欄設置了一些鏈接。整個鏈接區域應該突出灰色，並且它曾經工作過。然後，我決定以更好的方式構建我的導航欄並重新編寫它，但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>

來源

2015-10-18 Nockingam

請發佈你的jsfiddle。 – Alex

** idfive **在哪裏？ – SHAZ

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會幫你出來

來源

2015-10-18 04:04:06

非常感謝，解決了它！ – Nockingam

突出顯示鏈接不工作

回答

相關問題