jQuery:仅在同级导航栏-项目上触发鼠标离开

Question

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

不确定，如何编写逻辑，所以有朋友可以帮我解决这个问题吗？

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

​

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