Question

我使用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;
}

我在这里搜索了几个问题，但似乎没有一个我正在寻找。

Answer 1

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

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

JSFIDDLE DEMO

这样你就可以看到是什么让mouseleave触发了一下，看看下面那个在父母身边有边框的演示....看看父母或孩子都没有的差距。 请注意，由于absolute定位，孩子在外面...通常孩子会在父母内部。

SEE GAP BETWEEN CHILD AND PARENT

Answer 2

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

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

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

通过子菜单的填充触摸链接边缘来解决问题。您可以在此jsfiddle

中查看结果

Answer 3

我认为我有解决方案......问题来自＆＃34;显示：内联＆＃34;在父元素（menuIns）中。如果我使用＆＃34; display：block＆＃34;的正确组合和＆＃34;浮动＆＃34;我可以解决问题了。

Jquery mouseenter mouseleave问题

3 个答案: