How to select link of current page

Question

I am trying to have my links in a menu styled when I mouse over them. Then when the mouse leaves the link (without clicking on it) I want the current link to go back to being styled.

html:

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

css

.current { color: #FFBB3F;}

js

$( "nav a" ).on('mouseover', function(){

    $( "nav a.current" ).removeClass("current");
        $(this).addClass("current");
    });

$( "nav a" ).on('mouseleave', function(){
    $(this).removeClass("current");
    var pageURL = $(location).attr("href");
    $('a[href="pageURL"]').addClass("current");

});

but this is not working. if I do an alert

 alert(pageURL);

it gives me the path to the current page, and if I paste just an href

$('a[href="index.html"]').addClass("current");

it does style that link, but obviously I would want the current link to be styled. First time I try this. Any help appreciated. Thanks

Answer 1

Using just CSS, a combination of rules can get really close (perhaps close enough depending on how #menu is), see comments in CSS section:

/*
  1. Color the current one if the menu isn't being hovered
  2. Color the current link if being hovered
*/
#menu:not(:hover) .current, /* 1 */
#menu a:hover {             /* 2 */
  color: #FFBB3F;
}

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>

That CSS-only version has the issue that if you're not hovering a link but you are hovering the #menu, nothing is highlighted. I can't think of a pure CSS way to handle that, so a bit of JavaScript (see comments):

// Set a class on #menu only when hovering a link
$("#menu")
  .on("mouseenter", "a", function() {
    $("#menu").addClass("link-hover");
  })
  .on("mouseleave", "a", function() {
    $("#menu").removeClass("link-hover");
  });

/*
  1. Color the current one if the menu doesn't have the link-hover class
  2. Color the current link if being hovered
*/
#menu:not(.link-hover) .current, /* 1 */
#menu a:hover {                  /* 2 */
  color: #FFBB3F;
}

<div id="header">
  <div id="title"><h1>Title<span id="Subtitle">Subtitle</span></h1></div>
      <nav class="cf" id="menu">
      <ul>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery.html">GALLERY</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="index.html" class="current">HOME</a></li>
      </ul>
      </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>