CODEWITHSUNDEEP
javascriptjquerycss
Mitch Barlow
Mitch Barlow

Reputation: 131

jquery issue with mouseleave

I am posting this issue in response to a question I asked a few days ago, I have created a fiddle to hopefully give a more clear explanation. I can hover over a div (with a css hover attribute), have another div pop up on another part of the screen while in mouseover state. have it disappear when i mouseleave. when I click the hover div, the red div that was disappearing and reappearing, stays, and another div pops up (as a popup state). I can click the new blue box to close both blue div, and red div. after the first iteration, I hover over original hover div, and the red div pops up again. only this time, when I mouse leave, the red div remains (does not disappear like it originally did... any tips or tricks would be most helpful. 

$('#bg').on({
    mouseover: function () {
        $('#bg2').css('display', 'block');
    },
    mouseleave: function () {
        $('#bg2').css('display', 'none');
    },
    click: function () {
        $('#bg3').css('display', 'block'),
        $('#bg').off('mouseleave');
    }
});

$('#bg3').on({
    click: function () {
        $('#bg3').css('display', 'none'),
        $('#bg2').css('display', 'none');
    }
});

http://jsfiddle.net/skinnyb/0vvk945y/1/

Upvotes: 1

Views: 122

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

fiddle

function mouseLeaveStuff() { // Create a function
    $('#bg2').hide();
}

$('#bg').on({
    mouseenter: function () { // (P.S: Use mouseenter with mouseleave)
        $('#bg2').show();
    },
    mouseleave: mouseLeaveStuff, // Use your function
    click: function () {
        $('#bg3').show(),
        $('#bg').off('mouseleave'); // Off event
    }
});

$('#bg3').on({
    click: function() {
        $('#bg3, #bg2').hide();
        $('#bg').on('mouseleave', mouseLeaveStuff); // Reassign event and function
    }
});

if you prefer you can also rewrite all your code into:

var activated = 0;

$("#bg").hover(function(){
    if(!activated) $('#bg2').toggle();
}).click(function(){
    activated = 1;
    $("#bg3").show().on("click", function(){
        activated = 0;
        $( "#bg2" ).add( this ).hide();
    });
});

EDIT: as per-request

if you want to use multiple elements, you'd better got using . class instead of # ID:

$(".bg").each(function(){
  var $bg  = $(this);
  var $bg2 = $bg.nextAll('.bg2:first');
  var $bgP = $bg.nextAll('.bgpopup:first');
  $bg.data("activated", 0).hover(function(){
    if($bg.data("activated") === 0) $bg2.toggle();
  }).click(function(){
    $bg.data("activated", 1);
    $bgP.show().on("click", function(){
      $bg.data("activated", 0);
      $bg2.add( this ).hide();
    });
  });
});
.bg {
  background: #ccc;
  width: 200px;
  height: 120px;
}
.bg:hover {
  background: #000;
}
.bg2 {
  position:absolute; top:250px;
  left:250px;
  background: red;
  width: 200px;
  height: 120px;
  display:none;
}
.bgpopup {
  background: blue;
  width: 200px;
  height: 120px;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">1</div>
<div class="bg2">1</div>
<div class="bgpopup">1</div>

<div class="bg">2</div>
<div class="bg2">2</div>
<div class="bgpopup">2</div>

Upvotes: 3

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

add the mouseleave again

$('#bg3').on({
    click: function () {
        $('#bg3').css('display', 'none'),
        $('#bg2').css('display', 'none');

        $('#bg').on({mouseleave: function () {
            $('#bg2').css('display', 'none');
        }}); 
    }
});

SEE DEMO

Upvotes: 1

Ram
Ram

Reputation: 144729

does not disappear like it originally did

That's because off method in your click handler removes the bound mouseleave handler. You should either rebind the mouseleave handler to the element or use a flag.

Upvotes: 1

Related Questions