我设置了一些带有链接的导航栏。整个链接区域应该突出显示灰色,并且它曾经工作过。然后我决定以更好的方式构建我的导航栏并重新编写它,但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>
&#13;
答案 0 :(得分: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 会帮助您