jQuery mouseover忽略元素

Question

我怎么能用jQuery mouseover来忽略元素之间的空格，所以鼠标悬停在位于父元素之外的元素上仍然有效？

这是一个片段。 黄色列表应在鼠标悬停时处于活动状态，如果我转到此列表仍然处于活动状态。目前，当我想要去黄色列表时，mouseout会被解雇。

如果我将黄色列表和蓝色列表的当前链接保留，则应隐藏黄色列表。

＆＃13;

＆＃13;

$("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');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用left:100%;使其在主侧边栏后面对齐

＆＃13;

＆＃13;

$("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');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最简单的方法是不移动left:200px;你的项目，而不是将其包裹在内容中并使用填充扩展内部空间200px，如下所示：

<div>
  <ul>
    <li>Link 1
      <div> <!-- add padding-left: 200px -->
        <ul> <!-- remove left: 200px -->
          <li>Link 2</li>
        </ul>
      </div>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

当你需要向右移动200px时，我正在谈论案例

Answer 3

将width和height应用于div，并将您的活动更改为mouseenter和mouseleave：

＆＃13;

＆＃13;

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

＆＃13;

body {
  background:red;
}

div {
  position:relative;
  border: 1px solid black;
  width: 280px;
  height: 100px;
}

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

另一种方法是仅在您悬停其他链接时隐藏黄色列表，具体取决于您的需要。否则，当您离开链接时，您无法隐藏黄色列表，除非用户想要访问。

$("ul > li").mouseover(function() {
  $('.active').removeClass('active');
  $('.visible').removeClass('visible');
  $(this).addClass('active').find('ul').addClass('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>