将活动类应用于其父li元素时，如何覆盖锚元素的字体颜色？

Question

I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the li elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.

Also, I'd like to override or prevent the :hover pseudo class when the link is active.

Here's the codepen which will hopefully make this clearer. Could you please advise how to override the a element's font color?

Thanks!

Answer 1

You have HTML looking like

<ul class="topnav">

    <li class="topnavli">
      <a href="#fun-stop">Link 3</a>                                   
    </li>

     .......

Then styles for the anchors

.topnav a { color: #fff; }

then you add the active class to the LI elements, but the styles are only set as

.active { color: #FFADA0;  }

That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like

li.active a { color: #FFADA0; }

As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with

li.active {
  border:3px solid #FFADA0; 
}

li.active a {   
   color: #FFADA0;     
}

Codepen

Answer 2

Add

.topnav .active a {  
    color: #FFADA0 ;     
}

 $('.topnav li').click(function() { $(".topnav li.active").removeClass("active"); $(this).addClass('active'); }); 

 .header h1 { font-family: 'Montserrat', sans-serif; font-size: 44px; letter-spacing: 3px; margin: 0; padding: 15px 0 15px 30px; display: inline-block; color: #fff; } .topnav { position: fixed; top: 0; width: 100%; list-style: none; font-family: 'Montserrat', sans-serif; background-color: #000; z-index: 1; } .topnav li { display: block; float: right; margin: 20px 8px 0 0; } .topnavli { border: 3px solid #fff; } .topnav li:first-child { margin-right: 50px; } .topnav li:hover { border: 3px solid #6fb7b7; transition: 0.3s; } .topnav .active a { color: #FFADA0 ; } .topnav a { display: block; color: #fff ; font-weight: 600; padding: 10px 0 ; font-family: 'Raleway', sans-serif; text-align: center; text-decoration: none; width: 120px; } .topnav a:hover { color: #6fb7b7; text-decoration:none; transition: 0.3s; } .active { color: #FFADA0 ; border:3px solid #FFADA0; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="header"> <ul class="topnav"> <li class="topnavli"> <a href="#fun-stop">Link 3</a> </li> <li class="topnavli"><a href="#projects">Link 2</a></li> <li class="topnavli"><a href="#home">Link 1</a></li> <h1>website</h1> </ul> </div>