javascript - 突出显示导航栏的图像和文本

Question

所以我目前有一个由文本和该文本上方的图像组成的导航栏。当我将鼠标悬停在文本上时，图像会突出显示，反之亦然。假设我将鼠标悬停在“主页”图像上，它也应该突出显示该图像。现在，这工作得很好，但我的问题是，如果你移动鼠标太快，文本或图像将保持突出显示，这有点烦人。我只是想知道我是否能对此做些什么，如果不能的话，这也不是什么大不了的事。

不幸的是，我的代码有点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>

当文本突出显示时，它由 menutext 选择器处理，当图像突出显示时，它由 menuimgwrap 选择器处理。然后它会找出哪个导航栏元素被突出显示，然后决定该元素与哪个图像或文本匹配，并突出显示该元素。

如何解决此问题，以便当鼠标在导航栏上移动得太快时它不会保持突出显示状态？

谢谢

Answer 1

将其更改为使用 CSS。基本的悬停如下所示:

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