jQuery：仅在兄弟导航栏项上触发 mouseleave答案

【问题标题】：jQuery: fire mouseleave only on sibling navbar-itemjQuery：仅在兄弟导航栏项上触发 mouseleave
【发布时间】：2021-02-12 18:54:13
【问题描述】：

在下面的 jQuery 代码中，当前mouseleave evt 在鼠标离开当前 evt 目标时触发，但是我希望 mouseleave 仅在鼠标位于任何兄弟.navbar-item 或鼠标位于 @ 之外时触发987654324@，否则不是。

不知道怎么写逻辑，有大佬能帮我解决一下吗

这里是CodePen demo

谢谢

$('.second-lvl .navbar-item').mouseenter(function(){
    let id = $(this).attr('data-target')
    $('#'+id).show(500);
}).mouseleave(function(){
  let id = $(this).attr('data-target')
    $('#'+id).hide(0);
});

.wrapper {
  margin: 40px;
  background: lightblue;
  border: 1px solid;
  padding: 10px;
}
.navbar-item, .preview {
  display: block;
  margin-bottom: 10px;
  width: 200px;
  font-family: sans-serif;
  text-transform: uppercase;
  padding: 10px 30px;
  border: 1px solid;
  background-color: #ececec;
  cursor: pointer; }

.preview {
  background: red;
  position: absolute;
  right: 100px;
  top: 100px;
  display: none;
}
.visible {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="navbar-dropdown second-lvl">
    <div class="navbar-item" data-target="oak-1">
      <a>Oak 1</a>
    </div>
    <div class="navbar-item" data-target="oak-2">
      <a>Oak 2</a>
    </div>
    <div class="navbar-item" data-target="oak-3">
      <a>Oak 3</a>
    </div>
    <div class="navbar-item" data-target="oak-4">
      <a>Oak 4</a>
    </div>
  </div>

  <div class="all-previews">
    <div class="preview" id="oak-1">
      Oak Tree 1 info
    </div>

    <div class="preview" id="oak-2">
      Oak Tree 2 info
    </div>

    <div class="preview" id="oak-3">
      Oak Tree 3 info
    </div>

    <div class="preview" id="oak-4">
      Oak Tree 4 info
    </div>
  </div>
</div>

【问题讨论】：

I want the mouseleave to fire only when the mouse is over any the sibling .navbar-item 不清楚，您希望在离开导航栏项时触发 mouseleave 吗？
我不明白你的逻辑，是不是：当你进入 navbar-item 时，你会显示预览 id，而当你退出 navbar-item 时会隐藏？
@Frenchy 是的，当前的逻辑是当鼠标悬停在.navbar-item 上时，它会显示目标 id div（导航栏项目属性中的值 data-target），当鼠标离开该项目时，目标id 是隐藏的。现在我想要的是在 mouseenter navbar-item 时显示目标 ID，但仅当鼠标进入另一个兄弟 .navbar-item 或在 .wrapper 区域之外时隐藏目标 ID，否则目标 ID 保持可见。希望你更清楚。你能帮忙修改一下代码吗？

标签： jquery

【解决方案1】：

如果我理解了你的逻辑，请尝试：

var id='';
$('.second-lvl .navbar-item').mouseenter(function(){
    if(id == ''){
        id = $(this).attr('data-target')
        $('#'+id).show(500);
    }else{
        $('#'+id).hide(0);
        id = $(this).attr('data-target')
        $('#'+id).show(500);   
    }
})

$('.wrapper').mouseleave(function(){
        $('#'+id).hide(0);
});

.wrapper {
  margin: 40px;
  background: lightblue;
  border: 1px solid;
  padding: 10px;
}
.navbar-item, .preview {
  display: block;
  margin-bottom: 10px;
  width: 200px;
  font-family: sans-serif;
  text-transform: uppercase;
  padding: 10px 30px;
  border: 1px solid;
  background-color: #ececec;
  cursor: pointer; }

.preview {
  background: red;
  position: absolute;
  right: 100px;
  top: 100px;
  display: none;
}
.visible {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="navbar-dropdown second-lvl">
    <div class="navbar-item" data-target="oak-1">
      <a>Oak 1</a>
    </div>
    <div class="navbar-item" data-target="oak-2">
      <a>Oak 2</a>
    </div>
    <div class="navbar-item" data-target="oak-3">
      <a>Oak 3</a>
    </div>
    <div class="navbar-item" data-target="oak-4">
      <a>Oak 4</a>
    </div>
  </div>

  <div class="all-previews">
    <div class="preview" id="oak-1">
      Oak Tree 1 info
    </div>

    <div class="preview" id="oak-2">
      Oak Tree 2 info
    </div>

    <div class="preview" id="oak-3">
      Oak Tree 3 info
    </div>

    <div class="preview" id="oak-4">
      Oak Tree 4 info
    </div>
  </div>
</div>

你也可以写这段代码：

$('.second-lvl .navbar-item').mouseenter(function(){
        $(".all-previews div[id^=oak]").hide(0);
        let id = $(this).attr('data-target')
        $('#'+id).show(500); 
});

$('.wrapper').mouseleave(function(){
        $(".all-previews div[id^=oak]").hide(0);
});

【讨论】：