CODEWITHSUNDEEP
jquery
Owais Kiani
Owais Kiani

Reputation: 375

How can i hide shown div if user did not hover mouse on shown div

I have two divs close to each other. When I hover over div one, div two is showing.

If I don't mouse hover on div two it should fadeout. Or if I move mouse from div one to elsewhere then also div two should fadeout.

$(".one").mouseover(function () {
    $(".two").show();
});
$(".two").mouseleave(function () {
  $(".two").fadeOut(1);
});

Js Fiddle

Upvotes: 0

Views: 347

Answers (4)

Narendra
Narendra

Reputation: 441

Check this out.

$(".one").hover(function () {
$(".two").show();
},function(){
   if($(".two:hover").length==0) {
    $(".two").fadeOut();
}else{
    $(".two").mouseleave(function () {
        $(".two").fadeOut();
    });
}
});

Upvotes: 0

Owais Kiani
Owais Kiani

Reputation: 375

I did it by my self.

$(".one").mouseover(function () {
    $(".two").show();
});
$(".one").mouseleave(function () {
    if($(".two").is(":hover")){
    }else{
        $(".two").fadeOut();
    }
});
$(".two").mouseleave(function () {
    if($(".one").is(":hover")){
    }else{
        $(".two").fadeOut();
    }
});

Updated Js Fiddle

Upvotes: -1

Shaunak D
Shaunak D

Reputation: 20626

You can add a mouseover event on body and act according to the current target. This will close/hide the element, if the mouse hovers anywhere in the body excpet .one and .two

$("body").mouseover(function (e) {
    if(!($(e.target).is('.one') || $(e.target).is('.two'))){
        $(".two").fadeOut();
    }
});

Updated Fiddle

Upvotes: 2

myTerminal
myTerminal

Reputation: 1646

Updated your Fiddle.

You could use another parent div and bind events to it, instead of .one and .two.

Upvotes: 1

Related Questions