CODEWITHSUNDEEP
jqueryhtmlcss
mpacheco
mpacheco

Reputation: 247

Block events when have a div with greater z-index

enter image description here

DIV 1 has a mouseover event that shows DIV 2 and has mouseleave event that hide DIV 2, when DIV 2 is showed, how I can block DIV 1 events when my pointer is over DIV 2? mouseleave event now makes me Flickering] (DIV 2 has greatest z-index than DIV 1)

Upvotes: 0

Views: 127

Answers (3)

Aravind30790
Aravind30790

Reputation: 992

Are u expecting something like thisJSFIDDLE

Jquery:

$(document).ready(function(){
  $(".red").mouseenter(function(){
    $(".yellow").show("slow");
  });
    $(".red").mouseleave(function(){
    $(".yellow").hide("slow");
  });
});

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can nest both divs and apply hover on parent: CSS example: http://liveweave.com/qtwQOE
edit : to reduce size of parent div to its content, change CSS layout display: http://liveweave.com/94tdXW

Upvotes: 1

pzin
pzin

Reputation: 4248

You can use stopPropagation().

Upvotes: 1

Related Questions