Открытие корзины при наведении

[designa]

Пытаюсь написать небольшой скрипт, открытие корзины при наведении, нужна помощь в доработке, что бы при клике на любой элемент не входящий в #cart выполнялся  $('#cart').removeClass( "open" );

<script>
$( "#cart" ).hover(
  function() {
  $('#cart .content').stop(true, true).show('medium');
    var $popcart = jQuery ('#cart');
    $popcart.addClass('open');
  }
);
</script>

 

[ArtemPitov]

там css достаточно 

[designa]

там css достаточно 

 

Если css то при hover будет display:block, а если убрать указатель мыши то display:block убирается и окно закрывается. А нужно - при hover добавляем класс open (корзина открыта), убираем указатель мыши класс остается (корзина открыта), а при нажатии на любой элемент не входящий в #cart  выполняем $('#cart').removeClass( "open" );  (корзина закрыта)

Змінено 30 вересня 2016 користувачем designa

[ArtemPitov]

$(function() {

  var container = $("#cart");

  container.mouseover(function () {

    $(this).show();// или $(this).addClass('open');

  });

  $(document).mouseup(function (

    if (container.has(e.target).length === 0){

        container.hide(); // или $(this).removeClass('open');

    }

  });

});

Змінено 30 вересня 2016 користувачем ArtenPitov

[designa]

$(function() {
  var container = $("#cart");
 
  container.mouseover(function () {
    $(this).show();// или $(this).addClass('open');
  });

  $(document).mouseup(function (
    if (container.has(e.target).length === 0){
        container.hide(); // или $(this).removeClass('open');
    }
  });
});

 

 

Unexpected token if

if (container.has(e.target).length === 0){

Я не знаю что я написал, но это работает, только 1 проблема при нажатии на одну из кнопок в корзине, корзина закрывается, затем открывается и только потом переходит на нужную страницу

 

 

<script>
$( "#cart a" ).hover(
  function() {
  $('#cart .content').stop(true, true).show('medium');
    var $cag = jQuery ('#cart');
    $cag.addClass('open');
    $('#cart ul').removeClass('open-close');
  }
);
</script>


<script>
$( "#wrapper" ).click(
    function() {
    $('#cart ul').addClass('open-close');
    $('#cart').removeClass('open');
  }
);
</script>


<style>
.open-close {
display: none !important;
}
</style>

 

Нужно еще будит почитать о функции mouseup и mouseover и попробовать что-то нормальное написать 

Змінено 30 вересня 2016 користувачем designa

[ArtemPitov]

@designa,

$(document).mouseup(
  function (e) {
    if (container.has(e.target).length === 0){
        container.hide(); // или $(this).removeClass('open');
    }
  }
);

Змінено 30 вересня 2016 користувачем ArtenPitov

[designa]

,

Вот так работает идеально, спасибо вам.

<script>
$(function() {
  var container = $("#cart");
  var closecontainer = $("#cart ul");
 
  container.mouseover(function () {
    $(this).addClass('open');
  });

$(document).mouseup(
  function (e) {
    if (container.has(e.target).length === 0){
        $(this).removeClass('open');
    }
  }
);
});
</script>

Сейчас попробую еще какую-то анимацию прикрутить.

[ArtemPitov]

@designa, http://jquery-docs.ru/effects/animate/