CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shehary
Shehary

Reputation: 9992

Keep hover div open after mouseleave and close it with click outside the div window or close button

I have the following jquery which opens and close the div "shopping_cart" when hover on "shopping_button"

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible');
 })
$('#shopping_button, .shopping_cart').on('mouseleave',function(){
  $(this).css('z-index','189');
  $(this).css('visibility','hidden');
  $(this).css('opacity','0');
 });

Need help with what I'm trying to achieve is that "shopping_cart" remain open on mouseleave and only close on if click outside the "shopping_cart" div or can add close button inside the "shopping_cart" div to close it.

Thanks guys.

Edited

I added the following to above code

$('html').click(function () {
    $('.shopping_cart').css('visibility','hidden');
});

and it does the job, only close the window when click outside "shopping_cart" div, but now if again hover on "shopping_button" it won't open the "shopping_cart" div, on inspect element it shows

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible'); <---This Remain Hidden
 })

Any Suggestion?

sorted
added this into mouseenter funtion

  $('.shopping_cart').css('visibility','visible');

And vollhhaaaa....:D

Still looking for more clean solution, if anybody have....

Thanks for all the help.

Upvotes: 0

Views: 3629

Answers (2)

QUB3X
QUB3X

Reputation: 536

Try to check out this JSFiddle: http://jsfiddle.net/m8nrzL7d/2/

$('#shopping_button').mouseenter(function(){
   $("#shopping_cart").css('display','block');
})
$('#btn-close').click(function(){
   $("#shopping_cart").css('display','none');
})
$('html').click(function() {
   $("#shopping_cart").css('display','none');
});

$('#shopping_cart').click(function(event){
    event.stopPropagation();
});

I've changed a bit your code, but it's simple: I added a button, because it's quicker to be implemented; then I replaced the cart with an ID instead of a class, because in my experience I had troubles event on classes and jquery. I used display: none instead of visibility: none, because I think the cart shouldn't occupy space (or does it have to? See here)

EDIT: I also added the function to close the cart if you click outside! See here for the explaination!

I hope I helped you...

Upvotes: 1

sirgijan
sirgijan

Reputation: 9

It is much better to use css class for formating element:

.shopping_cart {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.shopping_cart_active{
z-index: 300;
visibility:visible;
}

So you add class shopping_cart_active on hover:

$('#shopping_button, .shopping_cart').on('hover',function(){
$(this).addClass('shopping_cart_active');
});

And when you want outside of it you can use this:

$(html).on('click', function(){
$('.shopping_cart.).removeClass('shopping_cart_active');
})

Upvotes: 0

Related Questions