jQuery mouseenter mouseleaave 问题答案

【问题标题】：Jquery mouseenter mouseleaave issuejQuery mouseenter mouseleaave 问题
【发布时间】：2014-07-09 02:05:13
【问题描述】：

我在使用 jQuery 时遇到了 mouseenter/mouseleave 问题，显然，当我将鼠标移到子元素上时，它会触发 mouseleave 动作。

我有http://jsfiddle.net/theylooksotired/ucarF/1/中的所有代码

HTML：

<div class="menuAll">
  <div class="menuIns">
    <div class="menuInsTop">
      <a href="http://localhost/ilki/expertise">Expertise</a>
    </div>
    <div class="menuInsBottom" style="display: none;">
      <div class="menuInsBottomIns">
        <a href="http://localhost/ilki/expertise#notre-offre">Notre offre</a>
        <a href="http://localhost/ilki/expertise#conseil">Conseil</a>
        <a href="http://localhost/ilki/expertise#architecture">Architecture</a>
        <a href="http://localhost/ilki/expertise#formation">Formation</a>
      </div>
    </div>
  </div>
  <div class="menuIns">
    <div class="menuInsTop">
      <a href="http://localhost/ilki/carrieres">Carrierès</a>
    </div>
    <div class="menuInsBottom" style="display: none;">
      <div class="menuInsBottomIns">
        <a href="http://localhost/ilki/expertise#notre-offre">Notre offre</a>
        <a href="http://localhost/ilki/expertise#conseil">Conseil</a>
        <a href="http://localhost/ilki/expertise#architecture">Architecture</a>
        <a href="http://localhost/ilki/expertise#formation">Formation</a>
      </div>
    </div>
  </div>
  <div class="menuIns">
    <div class="menuInsTop">
      <a href="http://localhost/ilki/a-propos">A propos</a>
    </div>
    <div class="menuInsBottom" style="display: none;">
      <div class="menuInsBottomIns">
        <a href="http://localhost/ilki/expertise#notre-offre">Notre offre</a>
        <a href="http://localhost/ilki/expertise#conseil">Conseil</a>
        <a href="http://localhost/ilki/expertise#architecture">Architecture</a>
        <a href="http://localhost/ilki/expertise#formation">Formation</a>
      </div>
    </div>
  </div>
  <div class="menuIns">
    <div class="menuInsTop">
      <a href="http://localhost/ilki/echangeons">Echangeons</a>
    </div>
    <div class="menuInsBottom" style="display: none;">
      <div class="menuInsBottomIns">
        <a href="http://localhost/ilki/expertise#notre-offre">Notre offre</a>
        <a href="http://localhost/ilki/expertise#conseil">Conseil</a>
        <a href="http://localhost/ilki/expertise#architecture">Architecture</a>
        <a href="http://localhost/ilki/expertise#formation">Formation</a>
      </div>
    </div>
  </div>
  <div class="menuIns">
    <div class="menuInsTop">
      <a href="http://localhost/ilki/contact">Contact</a>
    </div>
  </div>
</div>

JS：

$('.menuIns').mouseenter(function(){
  $(this).find('.menuInsBottom').css('display', 'block');
});
$('.menuIns').mouseleave(function(){
  $(this).find('.menuInsBottom').css('display', 'none');
});

CSS：

.menuAll {
    text-align: center;
    padding-top: 50px;  
}
.menuAll a {
    font-size: 1.1em;
    color: #A2B5BE;
    padding: 0px 5px;
}
.menuInsBottom {
    position: absolute;
    left: 10px;
    top: 80px;
    display: none;
}
.menuInsBottom a{
    padding: 5px 10px;
    padding-right: 50px;
    display: block;
    font-size: 0.9em;
}
.menuInsBottom a:hover{
    background: #ECF0F2;
}
.menuInsBottomIns {
    background: #FFF;
    border:2px solid #A2B5BE;
    text-align: left;
}
.menuIns,
.menuInsTop {
    display: inline;
}
.menuIns {
    position: relative;
    cursor: pointer;
    padding-top: 50px;  
}
.menuIns:hover {
    color: #000;
}
.menuIns:hover a{
    color: #000;
}

我在这里搜索了几个问题，但似乎没有一个是我要找的。p>

【问题讨论】：

这通常是这样工作的，当鼠标离开带有事件处理程序的元素时，执行该事件的回调。

标签： jquery css

【解决方案1】：

如果您通过将top:80px 更改为top:70px 进行一些重叠，您可能能够在mouseleave 触发之前进入孩子。理想情况下，您的鼠标要经过一个不在父母之外的区域才能接触到孩子……您希望通过“重叠”来避免这种情况。

.menuInsBottom {
    .....
    top: 70px;

JSFIDDLE DEMO

您可以看到是什么让mouseleave 触发，看看下面的演示，它在父级周围有一个边框......看看父级或子级都没有的间隙。 请注意，由于absolute 定位，孩子在外面......通常孩子会在父母里面。

SEE GAP BETWEEN CHILD AND PARENT

【讨论】：

这是一个解决方案......但我正在寻找更清晰的东西，也许我在 JS 级别上遗漏了一些东西。
问题更多是 CSS 而不是 JS。通常孩子总是在父母中；但是绝对定位稍微改变了游戏。请看一下我提供的第二个演示。如果这不能令人满意的解释，请告诉我们。

【解决方案2】：

正如这个问题的另一个答案中提到的，问题来自于子元素是绝对定位的，并且菜单项和子菜单之间存在间隙。

解决此问题的一种方法是将 .menuInsBottom 的 CSS 设置为以下内容：

.menuInsBottom {
    position: absolute;
    left: 10px;
    top: 65px;
    display: none;
    padding-top: 10px;
}

通过使子菜单的填充触摸链接边缘来解决问题。你可以在这个jsfiddle看到结果

【讨论】：

这个解决方案的问题是父div中的链接（a元素）是重叠的，所以它们不再起作用了。
是的，没错。我没有想到。但是阅读您对问题的解决方案，我相信它会起作用。但是，您可能希望避免使用浮点数。可以将底部菜单和菜单链接设置为块显示。
我更新了解决方案以解决该问题。链接现在应该可以工作，并且鼠标离开/输入工作正常。让我知道这是否是您要找的。span>
感谢您的帮助，我会给您正确的答案。

【解决方案3】：

我想我有解决方案...问题出在父元素（menuIns）中的“display:inline”。如果我使用“display:block”和“float”的正确组合，我可以解决问题。

【讨论】：