突出显示链接不起作用答案

【问题标题】：Highlighting links not working突出显示链接不起作用
【发布时间】：2016-01-16 14:28:21
【问题描述】：

我有一个带有一些链接的导航栏。整个链接区域应该突出显示灰色，并且它曾经可以工作。然后我决定以更好的方式构建我的导航栏并重新编写它，但@987654321@ 不再工作了。

相同的代码：

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>

【问题讨论】：

请张贴你的 jsfiddle。
idfive在哪里？

标签： html css hyperlink hover highlight

【解决方案1】：

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 会帮助你

【讨论】：