javascript - 如何使事件页面在右侧有边框？

Question

我有一个导航栏，它的按钮有悬停效果。我试图做到这一点，所以只要页面处于事件状态，该按钮的右侧就会有一个边框，以显示它是当前打开的页面。我已完成所有设置，但我不确定为什么它不起作用。

function homeTransition()
{   
    $(this).toggleClass('activePage');

    if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
        document.getElementById("aboutContent").className = " animated slideOutRight";
    }
    if(document.getElementById("projectsContent").className.indexOf("slideInUp") !== -1){
        document.getElementById("projectsContent").className = " animated slideOutUp";
    }
    if(document.getElementById("contactContent").className.indexOf("slideInUp") !== -1){
        document.getElementById("contactContent").className = " animated slideOutUp";
    }
    document.getElementById("homeContent").className = " animated bounceInDown";
}

function aboutTransition()
{   
    $(this).toggleClass('activePage');
    
    document.getElementById("homeContent").className = " animated bounceOutUp";
    document.getElementById("aboutContent").style.visibility = "visible";
    document.getElementById("aboutContent").className = "activePage animated slideInLeft";

    document.getElementById("projectsContent").className = " animated slideOutUp";
    document.getElementById("contactContent").className = " animated slideOutUp";
}

function projectsTransition()
{   
    $(this).toggleClass('activePage');

    document.getElementById("homeContent").className = " animated bounceOutUp";
    document.getElementById("projectsContent").style.visibility = "visible";
    document.getElementById("projectsContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("contactContent").className = " animated slideOutUp";
}

function contactTransition()
{
    $(this).toggleClass('activePage');

    document.getElementById("homeContent").className = " animated bounceOutUp";
    document.getElementById("contactContent").style.visibility = "visible";
    document.getElementById("contactContent").className = "activePage animated slideInUp";

    document.getElementById("aboutContent").className = " animated slideOutRight";
    document.getElementById("projectsContent").className = " animated slideOutUp";
}

//Menu
$(function() {
    function expand() {
        $(this).toggleClass("on");
        $(".menu").toggleClass("active");
    };

    $('.noselect').click(function() {
        $('.noselect').removeClass('activePage');
        $(this).toggleClass('activePage');
    });

    $(".button").on('click', expand);
});

 body {
     font-family: "Source Sans Pro", sans-serif;
     color: #ccc;
     z-index: -100;
     background-color: black;
     overflow: hidden;
     text-align: center;
}
 .menu{
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     padding: 0;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.6);
     width: 250px;
     box-sizing: border-box;
     transition: all 250ms;
     -webkit-transform: translateZ(0) translateX(-100%);
     transform: translateZ(0) translateX(-100%);
     text-align:center;
     box-shadow: 0 0 10px #000;
}
 .active {
     transform: translateZ(0) translateX(0);
     transform: translateZ(0) translateX(0);
     -webkit-transition: 0.4s;
     transition: 0.4s;
     color: #e5e5e5;
}
 ul{
     padding: 0;
     list-style: none;
     font-size: .875em;
}
 li{
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     font-family: "Raleway";
     width: 250px;
     padding: 16% 2%;
     color: #a7a7a7;
     font-size: 1.8em;
     font-weight: 300;
     cursor: pointer;
     transition: all .4s ease-in-out;
}
 li:hover {
     color: white;
     background-color: #38d8b4;
     -o-transition: .6s;
     -ms-transition: .6s;
     -moz-transition: .6s;
     -webkit-transition: .6s;
     transition: .6s;
}
 .activePage li {
     transition: all .1s ease-in-out;
     color: white;
     border-right: 8px solid #38d8b4;
}
 .activePage li:hover {
   border-right: 8px solid #38d8a1;
   background: rgba(0, 0, 0, 0.6);;
 }
 .liSeperator {
     width: 100%;
     padding: .5%;
     color: (0, 0, 0, .4);
}
 .content {
     position: relative;
     width: 240px;
}
 .button {
     width:22px;
     height:40px;
     margin:80px 97px;
     padding: 10px;
     cursor:pointer;
     transition: all .2s ease-in-out;
}
 .button:hover{
     transform: scale(1.2);
}
 .line {
     width: 40px;
     height: 2px;
     background-color:#fff;
     transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
 .line.first{
     transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
 .line.second{
     transform: translateX(-10px) translateY(19px) rotate(0deg);
}
 .button.on .line.top{
     width: 40px;
     transform: translateX(-10px) translateY(20px) rotate(45deg);
}
 .button.on .line.bottom{
     width: 40px;
     transform: translateX(-10px) translateY(17px)rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
                                    <div class="menu">
                                        <h1 class="noselect">MENU</h1>
                                        <ul>
                                                <li id="home" class="noselect" onclick="homeTransition()">
                                                    <i class="fa fa-home"></i> home
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="about" class="noselect" onclick="aboutTransition()">
                                                    <i class="fa fa-user"></i> about
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="projects" class="noselect" onclick="projectsTransition()">
                                                    <i class="fa fa-code"></i> projects
                                                </li>
                                            <div class="liSeperator"></div>
                                                <li id="contact" class="noselect" onclick="contactTransition()">
                                                    <i class="fa fa-paper-plane"></i> contact
                                                </li>
                                        </ul>
                                    </div>
                                    <div class="content animated fadeInDown">
                                        <div class="button">
                                            <div class="line first top"></div>
                                            <div class="line second bottom"></div>
                                        </div>
                                    </div>

Answer 1

不要定位 .activePage li:hover 只需执行 .activePage

.activePage {
   border-right: 8px solid #38d8a1;
   background: rgba(0, 0, 0, 0.6);;
 }
 .activePage:hover {
   border-right: 8px solid red;
 }