如何添加链接下突出显示的突出显示条？

Question

我想在状态栏中的链接上方添加一个突出显示（此处名为进度条），突出显示应保持在活动链接之上，然后移动到鼠标悬停的链接之上。小提琴网站就是这样做的（许多其他网站也是如此，小提琴只是最重要的）并且图像显示了我想要做的事情的一个例子。 Fiddle在下面添加了我想要的。

＆＃34;协作下的小蓝线＆＃34;：

＆＃13;

＆＃13;

           $(function() {

      $("li").on("mouseover mouseleave",
         function () {
          $("#progressbar").toggleClass("highlight"); 

         });

            setInterval("rotateimages()", 1000);
        });


        function rotateimages() {

            var curPhoto = $("#photoShow div.current");
            var nextPhoto = curPhoto.next();
            if (nextPhoto.length == 0) {
                return;
            } 

            curPhoto.removeClass("current").addClass('previous');  
            nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
                curPhoto.removeClass('previous');
            });         
        }

＆＃13;

     #logo { float: left; }

     #nav  {
        list-style-type:none; 
        float:right;
    } 
    li {
        display: inline-block;
        border-right: thin;
    } 

    #progressbar{
        float: right;
        background-color: #D2D5D5;
        height: 5px;
        width: 100%;
    }

    .highlight {
        background-color: #79CDFE;
    }

    .topnav {
        background-color: #FEFEFE;
        overflow: hidden;
    }

    .topnav a {
        width:100%;
        float: left;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px; 
    }

    #nav a:hover {
        background-color: white;
        color: #79CDFE;
        background-origin: : #79CDFE;
        border-top: #79CDFE;
    }

    .topnav a.active {
        background-color: white;
        color: #79CDFE;
    }
    .status-menu {
        width: 98px;
        height: 5px;
        background: #4EFFFF;
        position: absolute;
    }

    body {
        padding: 0px;
        margin: 0px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>


    <div class="topnav">

    <div id="progressbar">
        <div id="care"></div>
        <div id="hospital"></div>
        <div id="service"></div>
        <div id="about"></div>
        <div id="news"></div>
    </div>

        <img src="src/images/logo.png" id="logo" class="gallery"/>
        <ul id="nav">
            <li> <a class="active" href="#home">Home</a></li>
            <li><a class="" href="#care">Link 1</a></li>
            <li><a class="" href="#hospital">Link 2</a></li>
            <li><a class="" href="#service">Link 3</a></li>
            <li><a class="" href="#about">Link 4</a></li>
             <li><a class="" href="#news">Link 5</a></li>
        </ul>
          
    </div> 
  
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想要链接上方的高亮条，我认为最好在链接上使用::before伪元素，你可以在任何你想要的位置。它目前位于进度条的顶部，但如果需要它可以更高或更低。

$(function() {

  $("li").on("mouseover mouseleave",
     function () {
      $("#progressbar").toggleClass("highlight");

     });

        setInterval("rotateimages()", 1000);
    });


    function rotateimages() {

        var curPhoto = $("#photoShow div.current");
        var nextPhoto = curPhoto.next();
        if (nextPhoto.length == 0) {
            return;
        }

        curPhoto.removeClass("current").addClass('previous');
        nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
            curPhoto.removeClass('previous');
        });
    }

#logo { float: left; }

#nav  {
    list-style-type:none;
    float:right;
}
li {
    display: inline-block;
    border-right: thin;
}

#progressbar{
    float: right;
    background-color: #D2D5D5;
    height: 5px;
    width: 100%;
}

.highlight {
    background-color: #79CDFE;
}

.topnav {
    background-color: #FEFEFE;
    overflow: hidden;
}

.topnav a {
    width:100%;
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
}

.topnav a::before {
    background-color: transparent;
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: -21px;
    width: 100%;
}

#nav a:hover {
    background-color: white;
    color: #79CDFE;
    background-origin: #79CDFE;
}

#nav a:hover::before {
    background-color: #79CDFE;
}

.topnav a.active {
    background-color: white;
    color: #79CDFE;
}

.topnav a.active::before {
    background-color: #79CDFE;
}

.status-menu {
    width: 98px;
    height: 5px;
    background: #4EFFFF;
    position: absolute;
}

body {
    padding: 0px;
    margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>


    <div class="topnav">

    <div id="progressbar">
        <div id="care"></div>
        <div id="hospital"></div>
        <div id="service"></div>
        <div id="about"></div>
        <div id="news"></div>
    </div>

        <img src="src/images/logo.png" id="logo" class="gallery"/>
        <ul id="nav">
            <li> <a class="active" href="#home">Home</a></li>
            <li><a class="" href="#care">Link 1</a></li>
            <li><a class="" href="#hospital">Link 2</a></li>
            <li><a class="" href="#service">Link 3</a></li>
            <li><a class="" href="#about">Link 4</a></li>
             <li><a class="" href="#news">Link 5</a></li>
        </ul>

    </div>

    </header>