javascript - jQuery 鼠标悬停忽略元素之间的空白空间

Question

我怎么能说 jQuery 鼠标悬停忽略元素之间的空白空间，所以鼠标悬停在位于父元素外部的元素上仍然处于事件状态？

这是一个片段。 yellow 列表应该在鼠标悬停时处于事件状态，如果我转到此列表，它仍然处于事件状态。目前，如果我想进入黄色列表，当然会触发 mouseout。

如果我离开黄色列表和蓝色列表的当前链接，黄色列表应该被隐藏。

$("ul > li")
  .mouseover(function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
  .mouseout(function() {
    $(this).removeClass('active');
    $(this).has('ul').removeClass('has-children visible');
    $(this).find('ul').removeClass('visible');
});

body {
  background:red;
}

div {
  position:relative;
}

ul {
  background:blue;
  color:white;
  padding:10px;
}

div > ul {
  position:absolute;
  left:0;
}

div ul > li > ul {
  position:absolute;
  left:200px;
  top:0;
  display:none;
}

.visible {
  display:block;
}

li.active ul {
  background:yellow;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

Answer 1

使用 left:100%; 使其紧跟在主侧边栏之后

$("ul > li")
  .mouseover(function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
  .mouseout(function() {
    $(this).removeClass('active');
    $(this).has('ul').removeClass('has-children visible');
    $(this).find('ul').removeClass('visible');
});

body {
  background:red;
}

div {
  position:relative;
}

ul {
  background:blue;
  color:white;
  padding:0;
  list-style-type: none;
  
}

div > ul {
  position:absolute;
  left:0;
  
}
div ul > li {
  position:relative;
  padding:5px 10px;
}

div ul > li > ul {
  position:absolute;
  left: 100%;
  top:0;
  min-width: 90px;
  display:none;
}

.visible {
  display:block;
}

li.active ul {
  background:yellow;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo1
    <ul>
        <li>Foo2</li>
      </ul>
    </li>
    <li>Bar</li>
  </ul>
</div>