Question

首先为可怕的头衔道歉。无法想出一个更好的方式来表达它。

其次这个错误在Chrome中似乎没有发生，但它在Firefox中，我没有测试任何其他浏览器。

我想要实现的是我的菜单项的悬停动画，当您将鼠标悬停在菜单项上时，括号会包含菜单项，但是我的鼠标似乎阻止了动画。

我理解为什么 - 这是因为只要我的鼠标触摸括号，它就不再悬停在导航项上，因此它会触发mouseleave功能。问题是我完全不知道如何防止这种情况。

HTML

<nav>
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>
<div id="navHoverLeft">[</div>
<div id="navHoverRight">]<div>

CSS

nav{ 
    background-color: rgba(0,0,0,0.6);
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

nav ul{
    position: relative;
    float: left;
    left: 50%;
}

nav li{
    position: relative;
    float: left;
    right: 50%;
    list-style: none;
    margin: 15px 25px 0 15px;
}

nav a{
    color: #fff;
}

nav a:hover{
    text-decoration: none;
    color: #fff;
}

#navHoverLeft, #navHoverRight{
    position: fixed;
    z-index: 500;
    color: #f33;
    float: left;
}

使用Javascript / jQuery的

    $(document).ready(function(){
      $('#navHoverLeft').css('top', $('nav ul li.active').offset().top - 1);
      $('#navHoverLeft').css('left', $('nav ul li.active').offset().left - 13);
      $('#navHoverRight').css('top', $('nav ul li.active').offset().top - 1);
      $('#navHoverRight').css('left', $('nav ul li.active').offset().left + $('.active').width() + 3);

      $('nav ul li a').on('mouseenter', function(){
        $('#navHoverLeft').animate({
          "left" : $(this).parent().offset().left - 13
        }, 500).clearQueue();

        $('#navHoverRight').animate({
          "left" : $(this).parent().offset().left + $(this).parent().width() + 3
        }, 500).clearQueue();
      });

      $('nav ul li a').on('mouseleave', function(){
        $('#navHoverLeft').animate({
          "left" : $('.active').offset().left - 13
        }, 500).clearQueue();

        $('#navHoverRight').animate({
          "left" : $('.active').offset().left + $('.active').width() + 3
        }, 500).clearQueue();
      });
    });

以下是fiddle的所有内容。

谢谢！

Answer 1

动画未被“阻止”，只是一旦触发了mouseleave， #havhoverright位于鼠标下方。要解决此问题，您需要在设置动画时考虑悬停元素，并忽略任何鼠标移动/鼠标中心事件。

你需要重构一下，我建议你先把事件委托给一个共同的父母（你必须要介绍）。

[编辑] 忘记我写的内容，用CSS轻松解决你的问题（至少在Firefox中）：

nav li{
    position: relative;
    float: left;
    right: 50%;
    list-style: none;
    margin: 15px 25px 0 15px;
    /* >>>> */ z-index: 600; /* <<<< */
}

导航中的悬停动画如果触及鼠标则会被阻止

1 个答案: