CODEWITHSUNDEEP
javascriptjqueryhtml
Jake
Jake

Reputation: 407

Highlighting image & text for navbar

so I currently have a nav bar that consists of text, and an image above that text. When I hover on the text, the image is highlighted, and vice versa. Say, I hover on the 'Home' image, it should also highlight the image. Now, this works just fine, but my problem is that, if you move the mouse around too fast, either the text or the image will remain highlighted, which is slightly annoying. I'm just wondering if there's anything that I can do about this, if not, it's not like it's a huge deal.

My code, which is unfortunately, a bit hackey:

<script>
  function handleEnter(elem) {
    elem = elem.target;
    var location = -1;
    var image_elem = null;
    if ($(elem).hasClass('menutext')) {
      location = $(elem).parent().parent().index() + 1
      image_elem = $('.menuimgwrap:nth-child('+ location +')')
      $(elem).parent().parent().addClass('hovering');
      $(image_elem).addClass('hovering');
    } else if ($(elem).hasClass('menuimgwrap')) {
      location = $(elem).index() + 1
      image_elem = $('.menuitem:nth-child('+ location +')')
      $(elem).addClass('hovering');
      $(image_elem).addClass('hovering');
    }
  }
  function handleLeave(elem) {
    elem = elem.target;
    var location = -1;
    var image_elem = null;
    if ($(elem).hasClass('menutext')) {
      location = $(elem).parent().parent().index() + 1
      image_elem = $('.menuimgwrap:nth-child('+ location +')')
      $(elem).parent().parent().removeClass('hovering');
      $(image_elem).removeClass('hovering');
    } else if ($(elem).hasClass('menuimgwrap')) {
      location = $(elem).index() + 1
      image_elem = $('.menuitem:nth-child('+ location +')')
      $(elem).removeClass('hovering');
      $(image_elem).removeClass('hovering');
    }
  }
  $('.menuitem, .menuimgwrap').hover(handleEnter, handleLeave);
</script>

When the text is highlighted, it's handled by the menutext selector, and when the image is highlighted, it's handled by the menuimgwrap selector. It then figures out which navbar element was highlighted, and then decides which image or text the said element matches up with, and highlights that one too.

How can I fix this, so that it doesn't stay highlighted if the mouse is moved too fast over the navbar?

Thanks

Upvotes: 0

Views: 44

Answers (1)

Chris Pietschmann
Chris Pietschmann

Reputation: 29905

Change this to use CSS instead. The basic hover would be like the following:

<style>
    .menuItem:hover {
        background-color: red;
    }
</style>
<a href='#' class='menuItem'>
    <img src='image.png' />
    Home
</a>

Upvotes: 1

Related Questions