1

我的网站： http: //modernego.info

我有一个<a>名为#btn-cart. 提供时，它会下拉并显示一个名为.block-cart. 所以这就是我想要的方式：

如果悬停在#btn-cart设置.block-cart为display:block;
如果悬停在#btn-cart设置.block-cart为display:none;

如果悬停在#btn-cartset .block-carttodisplay:block;
然后悬停在.block-cart忽略 mouseleave on #btn-cart。

我得到了使用下面的代码；但是，当我设置 时$('.block-cart').fadeOut(200)，即使我将鼠标悬停在它上面也会.block-cart设置为。display:none

另外，我之所以使用这个购物车，.live是因为这个购物车是通过 Ajax 运行的，没有它，jQuery 在 Ajax 调用之后就无法工作。有没有更好的办法？

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>

4

1 回答 1

2

我以很多不同的方式做了很多次，但是当我想到这个问题时，我认为最好的方法是用数据属性破解它。

简化示例：

HTML （简化/脏版，添加输入以检查子元素上的焦点/悬停）

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

JS *( 应该优化以避免重复的 DOM 搜索，但是你会得到
* Updated to reflectfadeOut()而不是hide()
* Updated to useon()而不是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);
    });

小提琴

http://jsfiddle.net/Meligy/GLG6A/（使用hover()宽度hide()）
http://jsfiddle.net/Meligy/GLG6A/3/（使用hover()宽度fadeOut()，只有轻微的变化）
http://jsfiddle.net/Meligy/GLG6A/ 5/（on()在元素上使用而不是hover()）
http://jsfiddle.net/Meligy/GLG6A/6/（on()在容器上使用，对AJAX更现实）

信用：

从这里得到灵感如何检查鼠标是否在 jQuery 中的元素上？并认为它工作得最好，最简单，它确实做到了！（至少在我的测试中）

于 2012-05-01T06:15:49.420 回答