用户悬停时的边框底部菜单答案

【问题标题】：Border bottom menu when user active on hover用户悬停时的边框底部菜单
【发布时间】：2019-08-19 09:20:44
【问题描述】：

我制作了一个固定且具有粘性的菜单。当用户将鼠标悬停在菜单边框底栏上时，它处于活动状态，但我想要的是当用户位于 source 部分时，之前的 Call Data 部分仍将处于活动状态。当前和以前的部分都将处于活动状态。有人可以帮我解决这个问题吗？

请看菜单图片，

Call Data Source

<div class="nav" id="myNav">
    <ul>
        <li><a href="#call-data">Call Data</a></li>
        <li><a href="#source">Source</a></li>
        <li><a href="#lead">Lead</a></li>
        <li><a href="#address">Address</a></li>
        <li><a href="#motivation">Motivation</a></li>
        <li><a href="#property">Property</a></li>
        <li><a href="#visit">Visit</a></li>
        <li><a href="#finish">Finish</a></li>
    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i></a>
</div>

这里是css，

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav {
    position: sticky;
    top: 0;
    overflow: hidden;
    background-color: white;
    position: -webkit-sticky;
    /* Safari */
    position: -moz-sticky;
    /* firefox */
    z-index: 5;
}

.nav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 24px;
    text-decoration: none;
    font-size: 17px;
}

.nav a:hover {
    color: green;
    border-bottom: 3px solid green;
}

.nav a.active {
    color: green;
    border-bottom: 3px solid green;
}

.nav .icon {
    display: none;
}

@media screen and (max-width: 1210px) {
    .nav a:not(:first-child) {
        display: none;
    }
    .nav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 1210px) {
    .nav.responsive {
        position: sticky;
        top: 0;
        overflow: hidden;
        background-color: white;
        position: -webkit-sticky;
        /* Safari */
        position: -moz-sticky;
        /* Safari */
        z-index: 5;
        opacity: 0.9;
    }
    .nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

【问题讨论】：

您的意思是，如果您将鼠标悬停在 Source 上，并且当前您在 Call Data 上，它们都应该有绿色边框底部？
@DaniyalLukmanov 是的，完全正确。以此类推，当我将鼠标悬停在其他部分时，当前部分之前的所有其他部分都将处于活动状态。
但这没有任何意义。 “活跃”的意思是——你在那个页面上。您只能将相同的样式应用于活动链接和您悬停的链接（我的意思是导航栏链接）。
或者我必须使用“active”以外的其他东西吗？
那你为什么不把active也加到前一个元素上呢？

标签： javascript html css frontend

【解决方案1】：

您可以尝试使用 css 兄弟选择器，例如：

li > a[href="#source"]:hover ~ li > a[href="#call-data"]{
  color: green;
    border-bottom: 3px solid green;
}

如果这不起作用，您可以使用 jquery，旧的 $('#element').hover();方法。

【讨论】：

【解决方案2】：

试试这个

.nav a:visited {
    color: green;
    border-bottom: 3px solid green;
}

如果您有任何疑问，请告诉我。

【讨论】：