Question

I’ve got nested navigation on my site. It looks something like this:

<ul>
  <li><a>Main Link 1</a>
    <ul>
      <li>Sublist Item of Main Link 1</li>
    </ul>
  </li>

  <li><a>Main Link 2</a>
    <ul>
      <li>Sublist Item of Main Link 2</li>
    </ul>
  </li>


</ul>

I would like to target only a link when it’s sibling, in this case the ul, children are hovered. I’m trying to achieve this with jQuery, but cannot find the right solution.

Thanks in advance

Answer 1

If you add some identifying classes to your HTML:

<ul>
  <li><a class="mainLink">Main Link 1</a>
    <ul class="linkHoverTarget">
      <li>Sublist Item of Main Link 1</li>
    </ul>
  </li>

  <li><a class="mainLink">Main Link 2</a>
    <ul class="linkHoverTarget">
      <li>Sublist Item of Main Link 2</li>
    </ul>
  </li>
</ul>

You can register for the hover events and then get to the corresponding link in those hover events like this:

$(".linkHoverTarget li").hover(
    function() {
        // get the link in a sibling of our parent ul
        $(this).parent().parent().find(".mainLink");
    }
);

This could probably be done with more complicated and fragile selectors without adding identifying classes, but it’s certainly not as clear or maintainable as doing it this way.