How To Make Hovering Over Active Button Not Use Hover Effect?

I have a navigation bar that has a hover effect for the buttons. Also whenever a page is active that button has a border on the right to show that it's the page that is currently o

Solution 1:

As @Pete said, your HTML is invalid. But you can exclude the .activePage class using :not() with your :hover selector.

So instead of li:hover use .noselect:not(.activePage) li:hover

//Menu
$(function() {
    functionexpand() {
        $(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: 0010px#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: 14px;
}

li {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: "Raleway";
  width: 250px;
  padding: 40px5px;
  color: #a7a7a7;
  font-size: 1.8em;
  font-weight: 300;
  cursor: pointer;
  transition: all .4s ease-in-out;
}

.noselect:not(.activePage) li:hover {
  color: white;
  background-color: #38d8b4;
  -o-transition: .6s;
  -ms-transition: .6s;
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
}

.liSeperator {
  width: 100%;
  padding: 1px;
  color: (0, 0, 0, .4);
}

.content {
  position: relative;
  width: 240px;
}

.button {
  width: 22px;
  height: 40px;
  margin: 80px97px;
  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);
}

.activePageli {
  transition: all .1s ease-in-out;
  color: white;
  border-right: 8px solid #38d8a1;
}

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

Solution 2:

You can add the following to your CSS:

.activePageli:hover {
   border-right: 8px solid #38d8a1;
   background: black;
 }

This will keep your border-right: and background the same and not trigger the hover effect that your other li elements receive.

Working Fiddle - https://fiddle.jshell.net/0nw77chv/ (CSS added at the bottom)