Ensure that the hover div remains open even after the mouse leaves, and only closes when clicked outside of the div window or on a

Question

Ensure that the hover div remains open even after the mouse leaves, and only closes when clicked outside of the div window or on a

I have a jQuery script that controls the opening and closing of the "shopping_cart" div when hovering over the "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');
 });

I want the "shopping_cart" to stay open when the mouse leaves, and only close when clicking outside of the div or using a close button inside the "shopping_cart".

Thank you to everyone for your help.

Edited

I added this code to the existing script:

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

While this successfully closes the window when clicking outside of it, now the "shopping_cart" won't open again when hovering over the "shopping_button". It seems to remain hidden according to the inspect element tool.

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

Any suggestions?

Sorted
I added this line to the mouseenter function:

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

And it works! Still open to cleaner solutions if anyone has any.

Thanks again for the assistance.

javascript jquery html css

Answer 1

Answer №1

Be sure to take a look at 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 made some tweaks to your code. I introduced a button for quick implementation and changed the cart to an ID instead of a class based on my past experiences with classes and jquery. I opted for display: none over visibility: none as it doesn't take up space (or does it need to? Check here)

UPDATE: I also included a feature to close the cart when clicking outside. More details can be found here!

I trust this information is helpful to you...

Answer 2

Be sure to take a look at 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 made some tweaks to your code. I introduced a button for quick implementation and changed the cart to an ID instead of a class based on my past experiences with classes and jquery. I opted for display: none over visibility: none as it doesn't take up space (or does it need to? Check here)

UPDATE: I also included a feature to close the cart when clicking outside. More details can be found here!

I trust this information is helpful to you...

Answer 3

Answer №2

It's best practice to utilize CSS classes for styling elements:

.cart_display {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.cart_display_active {
z-index: 300;
visibility: visible;
}

To activate the class cart_display_active on hover, you can do the following:

$('#cart_button, .cart_display').on('hover', function(){
$(this).addClass('cart_display_active');
});

If you want to deactivate it outside of the element, you can use this code:

$(html).on('click', function(){
$('.cart_display').removeClass('cart_display_active');
})

Answer 4

It's best practice to utilize CSS classes for styling elements:

.cart_display {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.cart_display_active {
z-index: 300;
visibility: visible;
}

To activate the class cart_display_active on hover, you can do the following:

$('#cart_button, .cart_display').on('hover', function(){
$(this).addClass('cart_display_active');
});

If you want to deactivate it outside of the element, you can use this code:

$(html).on('click', function(){
$('.cart_display').removeClass('cart_display_active');
})

Ensure that the hover div remains open even after the mouse leaves, and only closes when clicked outside of the div window or on a

Answer №1

Answer №2

Similar questions

Ajax sending incorrect parameter values

Transform form information for Web Api put request using MVC 5

Initiating the animation/game loop for a three.js object

Retrieving data from MongoDB for rendering on an HTML page

Is there a way to select and style the nth-child element within a Bootstrap .card body?

Sharing Data Across Multiple Windows in Angular 2 Using a Singleton List

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Tips on assigning a value to a dynamically generated drop-down element

Issue with redirecting after confirming user info permissions on Facebook login

Tips for aligning content in the Login Screen of Framework7?

Could you provide some insights on the topic of "Methods" within a jquery plugin?

Setting value in Angular's ng-repeat directive

Adjusting column widths in Material-Table: A guide to resizing columns

Property that is dynamically populated based on data retrieved from an external API

How can I set the width of a container dynamically using the Next JS Image component?

Is there a way to create a list of languages spoken using Angular?

Leverage scope variables and dynamic CSS properties when using ngClass

Assistance needed with incorporating an additional link button into the extensive menu

Utilizing setCustomValidity in Bootstrap 4 to dynamically display error messages in .is-invalid classes

Make sure to allow the async task to complete before beginning with Angular JS