javascript - 用户在悬停时处于事件状态时的边框底部菜单

我制作了固定且粘稠的菜单。当用户将鼠标悬停在其上时，菜单边框底栏处于活动状态，但是我想要的是当用户位于源区域时，上一个“呼叫数据”部分仍将处于活动状态。当前和先前的部分都将处于活动状态。有人可以帮我弄这个吗？

请看菜单的图片，

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

最佳答案

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

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

如果这不起作用，则可以使用带有良好的旧$（'＃element'）。hover（）;的jquery。方法。