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>

突出显示图像＆amp;导航栏的文字

1 个答案: