Jamie Belcher Jamie Belcher - 5 months ago 17
jQuery Question

JavaScript on hover effects not working on child links

I have this navigation bar that I got a lot of help with yesterday and it's looking really nice, I got help to create some JQuery to show a new bar on the click of a link, I tried to replace the on click event to on hover, and at first the new div would appear, but then when I go to select a link, the div disappears again. I tried to change the script to remain when the child links are hovered on, like this:

$('.navbar ul li:nth-child(2) a').hover(function() {
$(".additional").slideToggle()
});

$('.navbar ul li:nth-child(2) a').hover(function() {
$(".additional child(*)").slideToggle()
});


This is the fiddle of the (almost) working navigation bar

So this is the HTML That I use to throw the Navigation Bar together, with some CSS to do the colours and other small adjustments

<header>
<div class="navbar">
<ul>
<li style="float: left"><a href="#home">Home</a></li>
<li><a href="#contract">Contracts</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#other">Other</a></li>
<li> <a href="#release">Release Notes</a></li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
<ul class="additional">
<li><a target="_blank" href="https://lscm.pharmoutcomes.org/celesio">Lloyds Pharmacy</a></li>
<li><a target="_blank" href="https://contracts.pharmoutcomes.org/superdrug/home">Superdrug Pharmacy</a></li>
<li><a target="_blank" href="https://contracts.pharmoutcomes.org/daylewis/home">Day Lewis Pharmacy</a></li>
</ul>
</div>
</header>

Answer

Your problem occurs, because you don't specify in your JavaScript code that the child must stay open, when the parent loses hover, but the child has it.

To achieve that try altering your code to:

var childHovered = false;

  $('.navbar ul li:nth-child(2) a').hover(function() {
        $(".additional").slideDown();
    },
  function() {
    if (!childHovered) {
        $(".additional").slideUp();
    }
  });

  $(".additional").hover(function() {
    childHovered = true;
  },
  function() {
    $(this).slideUp();
    childIsNotHovered = false;
  });

Check out this update of your fiddle for a more visual representation.