Question

我使用两个div实现了购物车。包含购物车图片的'cart'div和包含购物车商品的'cart_items'div。单击购物车图像时，我可以使cart_items slideDown。我可以在悬停它时隐藏cart_items然后离开它，我遇到的问题是：

点击购物车然后鼠标移动而不输入cart_items，我无法隐藏cart_items。
我无法将鼠标悬停在cart和cart_items上，而不会阻止cart_items隐藏。

cart和cart_items位于两个相邻的div中。

HTML

<div id='header'>
    <div id='cart'><img src='cart.png'></div>
</div>

<div id='container'>
    <div id='cart_items'> contain items that will be pulled from database </div>
</div>

的jQuery

 $('#cart').click(function(){
    $('#cart_items').slideDown("300");
 });

 $('#cart_items').mouseleave(function(){
    $('#cart_items').hide();
 });

我做了大量的在线搜索，我在两个div中添加了许多jQuery mouseenter和mouseleave但不知何故事件相互抵消。

Answer 1

试试这个。检查你搬到的地方。同时将选择器更改为#container鼠标离开：

$('#container').mouseleave(function (e) {
            if (e.toElement.id != 'cart')
                $('#cart_items').hide();
        });

Answer 2

如果你将cart_item div带到购物车div中，然后在购物车div上定义你的mouseleave功能，它应该可以满足您的需求。

http://jsfiddle.net/uedyW/3/

<div id='header'>
    <div id='cart'>
        <img src='cart.png'>
        <div id='cart_items'>contain items that will be pulled from database</div>
    </div>
</div>

 $('#cart').click(function () {
     $('#cart_items').slideDown("300");
 });

 $('#cart').mouseleave(function(){
        $('#cart_items').hide();
 });

Answer 3

您可以将它们包装起来，然后使用该外部容器：

<div id="outerContainer">
    <div id='header'>
        <div id='cart'>
            <img src='cart.png'>
        </div>
    </div>
    <div id='container'>
        <div id='cart_items'>contain items that will be pulled from database</div>
    </div>
</div>

代码

 $('#cart').click(function () {
     $('#cart_items').slideDown("300");
 });

 $('#outerContainer').mouseleave(function (e) {
      $('#cart_items').hide();
 });

示例：http://jsfiddle.net/uedyW/6/

将鼠标悬停在购物车和打开它的标签上时隐藏购物车

3 个答案: