元素调整大小后的jQuery mouseout事件答案

【问题标题】：jQuery mouseout event after element resize元素调整大小后的jQuery mouseout事件
【发布时间】：2011-08-16 21:30:16
【问题描述】：

我正在尝试创建一个购物车小部件。想法是有一个框显示您的购物车中有多少物品，当您单击它时，它会展开并显示购物车内容的详细信息。

我设法让它打开nicley，但是当我想关闭它时出现问题。这应该发生在 mouseout 事件中，但我无法使其正常工作。

这里是html：

<div id="cart-wrapper" class="clearfix">
  <div id="cart">
    Cart 0 item(s) <img src="images/arrow-down.png" alt="cart">
  </div>
  <div id="cart-open">
    <ul>
      <li>Morbi</li>
      <li>Praesen</li>
      <li>Phasellus</li>
      <li>Pellentesque</li>
    </ul>
  </div>
</div>

所以#cart-open 是在需要时隐藏/显示的那个。并且默认有 display:none 应用

这里是 js：

$(function() {
   $('#cart').live('click', function(event) {
        $('#cart-open').css('display', 'block');
        $(this).css('border-bottom', 'none');
    });

   $('#cart-wrapper').live('mouseout', function (event) {
       $('#cart-open').css('display', 'none');
       $('#cart').css('border-bottom', '1px solid  #F0F0F0');
   })
});

所以问题是，当我单击#cart 框时，它会很好地打开并显示#cart-open，但是当我移动鼠标时，mouseout 事件会在#cart-wrapper 的旧尺寸上触发，这是乞求的尺寸#cart 的。是否可以在其子级更改大小后重新验证包装器的大小？或者也许有另一种方法来完成这项工作。这个想法很简单：当我将鼠标移出#cart 或#cart-open 时，隐藏#cart 打开。

【问题讨论】：

标签： javascript jquery drop-down-menu shopping-cart

【解决方案1】：

你试过“mouseleave”吗？

试试这个：

$(function() {
    $("#cart-open").hide();
    $("#cart").live("click", function() {
        $("#cart-open").show();
        $(this).css("border-bottom", "none");
    });

    $("#cart-wrapper").live("mouseleave", function() {
        $("#cart-open").hide();
        $("#cart").css("border-bottom", "1px solid #F0F0F0");
    })
});

我仅在 FireFox 上对此进行了测试，但它确实有效。如果你想玩http://jsfiddle.net/cWRWD/2/

，我还在这里添加了一个示例

希望对您有所帮助。

【讨论】：