1

my website: http://modernego.info

I have an <a> element named #btn-cart. When offered, it drops down and shows a div named .block-cart. So this is how I want it to go:

If hovered on #btn-cart set .block-cart to display:block;
If hover out on #btn-cart set .block-cart todisplay:none;

If hovered on #btn-cart set .block-cart to display:block;
and then hovered onto .block-cart ignore the mouseleave on #btn-cart.

I got that working with the code below; however, when I set $('.block-cart').fadeOut(200), the .block-cart is set to display:none even if I hover on it.

Also, I am using .live because this cart is run through Ajax and without it the jQuery doesn't work after the Ajax call. Is there a better way?

jQuery(function($) {
    $('#btn-cart').live('mouseenter', function() {
        $('.block-cart').css('display','block');                
    });
    //----------------------------------------------            
    $('.block-cart').live('mouseenter', function() {
        var close = false;
        $('.block-cart').css('display','block');    
    });
    //----------------------------------------------
    $('.block-cart').live('mouseleave', function() {
        close = false;
        $('.block-cart').fadeOut(200);   
    }); 
    //----------------------------------------------

    if (close != false) {   
        $('#btn-cart').live('mouseleave', function() {  
            $('.block-cart').fadeOut(200);
        });
    }

});

        <li class="hover hover-cart-sidebar">
                <a href="http://modernego.info/checkout/cart/" class="btn-cart hover-cart" id="btn-cart" title="Cart">

                        <span class="quantity">0</span>

                </a>    
                <div class="block block-cart">
    <div class="block-title">
    <strong><span>My Cart</span></strong>
</div>
<div class="block-content">
                        <p class="empty">Add something to your cart.</p>


        </div>

Alex Lacayo
  • 1,462
  • 1
  • 19
  • 27

1 Answers1

2

I have done it so many times in so many different ways, but as I think about this question, I think the best way is to hack it with data attributes.

Simplified example:

HTML (simplified/dirty version, added input to check focus/hover on child elements)

<div id="container">
    <a href="#" id="opener">open</a>
    <div id="menu">
        It's opened<br />
        <input /><br />
        Here
    </div>
</div>

JS *(should be optimized to avoid repeated DOM searches, but you get the
* Updated to reflect fadeOut() instead of hide()
* Updated to use on() instead of hover()

$("#menu").hide();

$("#container")
    .on("mouseenter", "#menu", function(){
        $(this).data("hover", true);
        $(this).show();
    })
    .on("mouseleave", "#menu", function(){
        $(this).data("hover", false);
        $(this).fadeOut(200);
    });

$("#container")
    .on("mouseenter", "#opener", function(){
        $("#menu").show();
    })
    .on("mouseleave", "#opener", function(){
        setTimeout(function(){
            var menuHovered = $("#menu").data("hover");
            if(!menuHovered) {
                $("#menu").fadeOut(200);
            }
        }, 50);
    });

Fiddle

http://jsfiddle.net/Meligy/GLG6A/ (using hover() width hide())
http://jsfiddle.net/Meligy/GLG6A/3/ (using hover() width fadeOut(), only slight change)
http://jsfiddle.net/Meligy/GLG6A/5/ (using on() on the elements instead of hover())
http://jsfiddle.net/Meligy/GLG6A/6/ (using on() on the container, more realistic for AJAX)

Credit:

Got inspiration from here How do I check if the mouse is over an element in jQuery? and thought it work best and simplest, and it actually did! (in my tests at least)

Community
  • 1
  • 1
Meligy
  • 35,654
  • 11
  • 85
  • 109
  • 1
    Thanks guy for the help. Working on it now. Trying to upgrade to 1.7 also so i can use .on(). – Alex Lacayo May 01 '12 at 06:22
  • awesome! However, im trying to incorporate .on() as after the AJax is called this no longer works. – Alex Lacayo May 01 '12 at 07:02
  • Instead of hover, try using "mouseenter" and "mouseleave" as event names when working with `on()` – Meligy May 01 '12 at 22:38
  • Check the updated JS and last 2 fiddles I added. Hopefully they can help you with it. – Meligy May 01 '12 at 22:48
  • Thanks so much for the help! I really appreciate it. It appears to be working flawlessy except for a flicker problem that happens after the ajax is run. (trying to debug this now) – Alex Lacayo May 02 '12 at 04:25
  • Note that the `hide()` at the beginning of the JS example above is only demo thing. In real code, apply the hiding by CSS (eg. `#menu { display:none; }`). This might be the reason for the flicker. – Meligy May 02 '12 at 05:37
  • Thanks for the help again, but that didn't solve my issue. It only seems to flicker if you hover in fast enough to see it. It appears that after you add an item to the cart, or remove, the flicker is happening behind the seems, and if you don't hover the btn-cart in enough time, then you dont see it. If you hover in just a bit to late, then you only see a portion of whats left. Weird. – Alex Lacayo May 02 '12 at 07:20