Use jQuery to toggle a div inside another div when hovered over

Question

Use jQuery to toggle a div inside another div when hovered over

I am trying to implement a quick view tab that appears when a customer hovers over a product. I have almost figured it out, but the issue is that once the mouse moves onto the quick view div button, it starts to fade away because technically it has moved off the trigger div. How can I make sure it stays visible?

Below is the jQuery code I am using:

    $("#cat_product").hover(
    function () {
        $(".quickview").fadeIn();
    },
    function () {
        $(".quickview").fadeOut();
    }
);

Here is the link to the fiddle where I am testing things out - https://jsfiddle.net/a0j96wyc/

jquery css

Answer 1

Answer №1

One suggestion is to implement a hover event for the .quickview element as well. When moving the cursor from #cat_product to .quickview, the hover event for .quickview will take precedence and prevent the button from fading out.

Since the button is fully enclosed within #cat_product, there is no need for a separate "hover off" event for .quickview. You will always be hovering over #cat_product when interacting with the button.

Additionally, I am utilizing the stop() function to clear the animation queue and avoid fade flickers.

$("#cat_product").hover(
  function () {$(".quickview").stop(true,true).fadeIn();},
  function () {$(".quickview").fadeOut();}
);

$(".quickview").hover(
  function () {$(this).stop(true, true).show(0);}
);

.quickview {
  display: block;
}
.hidden {
  display: none;
}

... (The rest of the code remains unchanged)

Edit:

CSS Solution

By slightly modifying your HTML structure, you can leverage CSS transitions to animate opacity without the need for JavaScript. Here's an example:

.quickview {
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out 0s;
  transition: opacity .2s ease-in-out 0s;
}
div#cat_product:hover div.quickview {
  opacity: 1;
}

... (The rest of the CSS styles remain unchanged)

Answer 2

One suggestion is to implement a hover event for the .quickview element as well. When moving the cursor from #cat_product to .quickview, the hover event for .quickview will take precedence and prevent the button from fading out.

Since the button is fully enclosed within #cat_product, there is no need for a separate "hover off" event for .quickview. You will always be hovering over #cat_product when interacting with the button.

Additionally, I am utilizing the stop() function to clear the animation queue and avoid fade flickers.

$("#cat_product").hover(
  function () {$(".quickview").stop(true,true).fadeIn();},
  function () {$(".quickview").fadeOut();}
);

$(".quickview").hover(
  function () {$(this).stop(true, true).show(0);}
);

.quickview {
  display: block;
}
.hidden {
  display: none;
}

... (The rest of the code remains unchanged)

Edit:

CSS Solution

By slightly modifying your HTML structure, you can leverage CSS transitions to animate opacity without the need for JavaScript. Here's an example:

.quickview {
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out 0s;
  transition: opacity .2s ease-in-out 0s;
}
div#cat_product:hover div.quickview {
  opacity: 1;
}

... (The rest of the CSS styles remain unchanged)

Answer 3

Answer №2

Check out this alternative solution I came up with. By utilizing the setTimeout() function and adjusting the css properties, we can achieve the desired animation effect.

CSS:

.quickview{
    display: block;
    opacity: 0;
    transition: opacity .2s linear;
}

JavaScript:

var $quickView = $(".quickview");
var timeout = null;

$("#cat_product").on({
    mouseenter: function () {
        $quickView.css("opacity", 1);
    },

    mouseleave: function () {
        timeout = setTimeout(function() {
            $quickView.css("opacity", 0);
        }, 50);
    }
});

$('.quickview').on({
    mouseenter: function() {
        clearTimeout(timeout);
    }
});

Take a look at the live demo here.

UPDATE: For an alternative version that does not rely on jQuery, check out this link.

Answer 4

Check out this alternative solution I came up with. By utilizing the setTimeout() function and adjusting the css properties, we can achieve the desired animation effect.

CSS:

.quickview{
    display: block;
    opacity: 0;
    transition: opacity .2s linear;
}

JavaScript:

var $quickView = $(".quickview");
var timeout = null;

$("#cat_product").on({
    mouseenter: function () {
        $quickView.css("opacity", 1);
    },

    mouseleave: function () {
        timeout = setTimeout(function() {
            $quickView.css("opacity", 0);
        }, 50);
    }
});

$('.quickview').on({
    mouseenter: function() {
        clearTimeout(timeout);
    }
});

Take a look at the live demo here.

UPDATE: For an alternative version that does not rely on jQuery, check out this link.

Use jQuery to toggle a div inside another div when hovered over

Answer №1

Edit:

Answer №2

Similar questions

The issue of the JQuery div failing to center itself persists even after refreshing the page

Elements appear with varying widths in Firefox compared to Webkit-based browsers

Dealing with Jquery AJAX requests to NLB and navigating the challenges of cross-domain scripting restrictions

The formatter function provides the complete HTML markup for the slickgrid

What is the process for creating a two-column table in Angular?

Can a URL be included in the options of an rmarkdown header?

How can I programmatically close the Date/Time Picker in Material UI Library?

Adjusting the screen width to activate a responsive nav bar with a centered title

What would be the best method for refreshing CSS following the dynamic addition of data using jQuery for optimal efficiency?

Issue displaying content in a two-column setup on Chrome and Mozilla browsers due to ASP problem

What could be causing the issue with setting the right margin (element.style.marginRight = xxx) not working?

Add another condition to the current JavaScript rule

Struggling to modify CSS properties for :before and :after pseudo-elements?

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

Are jquery form labels a myth? Do they even exist?

Ways to style text using variables in SASS without using quotation marks

The steps to triggering a button click after e.preventDefault()

Discovering the data content received from a server using jQuery ajax techniques

Customizing Bullet Points in CSS Styling

Inserting lines into the text, creating a visually appealing layout