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

【问题标题】：Hiding shopping cart when hovering away from both cart and the tab that opened it将鼠标悬停在购物车和打开它的标签上时隐藏购物车
【发布时间】：2013-04-23 12:55:41
【问题描述】：

我使用两个 div 实现了一个购物车。一个包含购物车图像的“cart”div 和包含购物车项目的“cart_items”div。单击购物车图像时，我可以让 cart_items 向下滑动。我可以在将cart_items 悬停然后离开时隐藏它，我遇到的问题是：

当我点击购物车然后鼠标离开它而不输入 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，但不知何故，这些事件相互取消了。

【问题讨论】：

你能在 jsfiddle 上模拟同样的吗
按原样工作：jsfiddle.net/uedyW
div 标题和容器是另一个 div 的一部分吗？您可以尝试使用父 div 吗？（而不是购物车，使用标题）。刚看到Marks jsfiddle。那么你可以在其他浏览器上试试这个吗？如果你调试浏览器，控制台是否显示任何js错误？

标签： jquery

【解决方案1】：

如果您将 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();
 });

【讨论】：

【解决方案2】：

试试这个。检查你搬到哪里。还要将选择器更改为 #container 以使鼠标离开：

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

【讨论】：

尝试更新小提琴。不确定它是否在那里工作：jsfiddle.net/uedyW/1 可以在我的本地机器上使用建议的解决方案
你没有把（e）放在函数里。

【解决方案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/

【讨论】：