悬停在导航上的效果。 li 但排除其余的 li 元素答案

【问题标题】：hover effect over nav. li but exclude the rest of the li elements悬停在导航上的效果。 li 但排除其余的 li 元素
【发布时间】：2020-08-16 11:07:29
【问题描述】：

.nav li:hover a{
background-color: darkgrey;
}

.navbar li {
list-style-type: none;

float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;

    <body>
        <nav class="navbar">

            <ul>
                <li><a class="list" href="./test.html"> Home</a></li>
                <li><a class="list" href="#"> Service</a></li>
                <li><a class="list" href="#"> Contact</a></li>
                <li><a class="list" href="./test.html"> Training</a></li>
            </ul>

大家好。

在导航栏中，我为 li 元素设置了悬停效果。现在是它自动应用于页面上所有 li 的问题。我只想在我的导航中获得效果。酒吧，但我如何尝试它是或页面上的所有内容或没有。 sn-p 中的代码不起作用，我使列表悬停的唯一方法是： li:hover a{background-color: darkgrey;} 但显然它应用了页面上的所有 li。有没有解决的办法？谢谢！！

【问题讨论】：

标签： html css hover html-lists

【解决方案1】：

a.list:hover {
  background-color: darkgrey;
}

.navbar li {
list-style-type: none;

float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;

<body>
        <nav class="navbar">

            <ul>
                <li><a class="list" href="./test.html"> Home</a></li>
                <li><a class="list" href="#"> Service</a></li>
                <li><a class="list" href="#"> Contact</a></li>
                <li><a class="list" href="./test.html"> Training</a></li>
            </ul>

CSS 的逻辑错误。要获得悬停效果，您需要：

a.(class/id):hover {
  style
}

但是，我也不确定该列表是否真的是一个好主意。这将导致养成不良和无效的习惯。在您的 Nav-Link 被访问后，颜色会变成这样可以考虑：

a.link:link {
    text-decoration: underline;
    color: #141414; 
}

a.link:visited {
    text-decoration: underline;
    color: #141414; 
}

a.link:active {
    text-decoration: underline;
    color: #141414; 
}

这将防止链接按钮文本以不需要的方式更改颜色。

【讨论】：