jQuery mouseout событие после изменения размера элемента

Question

я пытаюсь создать виджет корзины покупок. Идея состоит в том, что есть окно, которое показывает, сколько товаров у вас есть в вашей корзине, и когда вы нажимаете на нее, оно расширяется и показывает подробный вид содержимого корзины.

Мне удалось открыть его, но проблема возникает, когда я хочу закрыть его обратно. это должно происходить с событием 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 - это тот, который скрыт / показан при необходимости. и по умолчанию имеет отображение: ни один не применяется

вот 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.

Answer 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/

Надеюсь, это поможет.