Question

I am trying to listen to an element effects on overlapping elements. I only want the hover effect on itemB when I hover to element B. However, since element B is on top of element A, the hover effect on element A also shows up. Are there anyways to solve this? Thanks a lot.

my jsfiddle

http://jsfiddle.net/pP7h3/

Answer 1

Try this http://codebins.com/bin/4ldqp8d/2

Work exactly like what you want. jQuery has mouseleave and mouseout events which fires only once.

You can use hover also but when you have many elements with in A & B each time you change mouse position form one element to other hover will fire. You don’t need that to be fired unless mouse moves out of B.

$(document).ready(function() {

 var overA = function(){
    $('#itemA').css('display','block');
};
  var outOfA = function(){
    $('#itemA').css('display','none');
};

  var overB = function(e){
    outOfA();
    $('#itemB').css('display','block');
    e.stopPropagation();
};

var outOfB = function(){
    overA();
    $('#itemB').css('display','none');
}

$('#a').mouseenter(overA).mouseleave(outOfA);

$('#b').mouseenter(overB).mouseleave(outOfB);

})