CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mesimplybj
mesimplybj

Reputation: 639

Parent child Hover not working as expected

I have a HTML like this where inner is the child div and outer is the parent div.

What I have to achieve : activate that div which has mouse over it.

I have called the hover function of the jQuery and it is helping me to append and remove the active class.

The problem: when I move the cursor upto innerchild div,it is activated but slowly when I move the cursor out from inner div to the outer parent div, the outer is not activated.

I tracked the mouse movement too. https://jsfiddle.net/Simplybj/zaz1qh8e/2/ .

The result: the mouseout of outer div is not fired when the inner div is hover

 $('div').hover(
   function() {
     $('div').removeClass('activeHover');
     $(this).addClass('activeHover');
   },
   function() {
     $(this).removeClass('activeHover');
   }
 );
.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}
.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}
.activeHover {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">

  </div>
</div>

Upvotes: 5

Views: 146

Answers (2)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

I tried separate functions for mouseover and mouseleave with jquery and is working for me. Could you please try this?

$(document).ready(function(){
  $('.inner').mouseenter(function(){
    $(this).addClass('activeHover');
    $('.outer').removeClass('activeHover');
  });
  $('.outer').mouseenter(function(){
    $(this).addClass('activeHover');
    $('.inner').removeClass('activeHover');
  });
  $('.inner').mouseleave(function(){
    $(this).removeClass('activeHover');
    $('.outer').addClass('activeHover');
  });
  $('.outer').mouseleave(function(){
    $('.outer').removeClass('activeHover');
  });
});
.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}

.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}

.activeHover {
  background-color: green;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="outer">
  <div class="inner">

  </div>
</div>

<ul class="mousemovement">

</ul>

Upvotes: 2

Mosh Feu
Mosh Feu

Reputation: 29347

If you want to achieve this, you need to listen to the mousemove event too. Also, I added event.stopPropagation(); so when you hover or move in the .inner div, the events of the .outer will not fired.

$('div').bind({
  mouseenter: eve,
  mousemove: eve,
  mouseout: function() {
    $(this).removeClass('activeHover');
  }
});

function eve(event) {
  event.stopPropagation();
  $('div').removeClass('activeHover');
  $(this).addClass('activeHover');
}
.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}
.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}
.activeHover {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">

  </div>
</div>

Upvotes: 5

Related Questions