jQuery: fire mouseleave only on sibling navbar-item

user_6667628 0
Viewed 32

In the following jQuery code, currently the mouseleave evt fires when the mouse leaves the current evt target, however I want the mouseleave to fire only when the mouse is over any the sibling .navbar-item or mouse is outside the .wrapper, else not otherwise.

Not sure, how to code the logic, so can anybuddy help me solve this.

Here is the CodePen demo

Thanks

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

jquery
1 Answers

If i have inderstood your logic, try that:

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>

you could write too this code:

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