CODEWITHSUNDEEP
javascriptjquerycss
ST80
ST80

Reputation: 3903

jquery keep hover state

I have an hidden element which contains a list. What I want to achieve is, to keep the hover state while moving from the clicked div with the cursor to the element with the list. The element which contains the list, should first disappear as soon as I go away from it e.g point away with the cursor. How can I achieve that?

I have this markup:

$('.hover').hover(function() {
  $('.hoverDiv').addClass('show')
}, function() {
  $('.hoverDiv').removeClass('show')
})
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hoverDiv {
  display: none;
  border: 1px solid red;
}

.hoverDiv.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hover">
    <p>
      hover this div
    </p>
  </div>

  <div class="hoverDiv">
    show me when hovered
  </div>
</div>

Here is the JSFIDDLE

Upvotes: 2

Views: 3368

Answers (2)

artemisian
artemisian

Reputation: 3106

Try this jquery code:

$('.hover').hover(function(){
    $('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
    $('.hoverDiv').removeClass('show')
});


$('.hover').hover(function(){
  $('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
  $('.hoverDiv').removeClass('show')
});
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hoverDiv {
  display: none;
  border: 1px solid red;
}

.hoverDiv.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hover">
    <p>
    hover this div
    </p>
  </div>

  <div class="hoverDiv">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </div>
</div>

Upvotes: 2

Mosh Feu
Mosh Feu

Reputation: 29337

You should bind the hover event to the .container instead of the .hover div. because when the user will move out from .hover, the list will be hide. But when user move on the .hoverDiv he still on the .container

$('.container').hover(function() {
  $('.hoverDiv').addClass('show')
}, function() {
  $('.hoverDiv').removeClass('show')
})
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hoverDiv {
  display: none;
  border: 1px solid red;
}

.hoverDiv.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hover">
    <p>
      hover this div
    </p>
    <div class="hoverDiv">
      show me when hovered
    </div>
  </div>
</div>

By the way, should don't need a script for this. You can do this using css only. Like this:

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hoverDiv {
  display: none;
  border: 1px solid red;
}

.container:hover .hoverDiv {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hover">
    <p>
      hover this div
    </p>
    <div class="hoverDiv">
      show me when hovered
    </div>
  </div>
</div>

Upvotes: 3

Related Questions