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

Question

.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。我只想在我的导航中使用这种效果。吧，但我怎么试过它，或者页面上的所有内容还是 none。代码片段中的代码不起作用，我使列表悬停的唯一方法是： li:hover a{background-color: darkgrey;} 但显然它应用了页面上的所有 li。有没有解决的办法？谢谢！！

Answer 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; 
}

这将防止 link 按钮文本以不需要的方式改变颜色。

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

hover effect over nav. li but exclude the rest of the li elements

html

css

hover

html-lists