jQuery:只在同级导航栏项上触发mouseleave

Question

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

不确定，如何编码逻辑，所以有人能帮我解决这个问题吗?

下面是CodePen演示

感谢

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