带悬停下拉的购物车

Question

我使用了以前的购物车设计，但不能应用这个选项悬浮购物车，这是一个代码示例。

我的代码

$('#cart').hover(function(e) {       
    $(".shopping-cart").stop(true, true).addClass("active");
  }, function() {
    $(".shopping-cart").stop(true, true).removeClass("active");
  }); 

我需要购物车的内容不消失，直到鼠标指针出来。

示例代码

参见Eduardo (@alexd2 2)在CodePen上的钢笔@alexd2 2。

​

Answer 1

使用多选择器将解决您的问题。

  $('#cart, .shopping-cart').hover(function(e) {
    $(".shopping-cart").stop(true, true).addClass("active");
  }, function() {
    $(".shopping-cart").stop(true, true).removeClass("active");
  });  

Answer 2

使用纯css，您可能会做这样的事情。

​

.cart {
background-color: lightblue;
  float: right;
  text-align: right;
  position: relative;
}

.list {
  
  background-color: lightgreen;
  height: 250px;
  width: 300px;
  border: 2px solid red;
right: 0;
  position: absolute;
  transition: 1s all;
  transform: scale(0) ;
  transform-origin: 100% 0%;
}

.cart:hover > .list {
  transform: scale(1);
}

<div>
  <div class="cart">
    This is a cart
    <div class="list">
      some long list
    </div>
  </div>
</div>

​

position: absolute是可选的(以及附带的css)，只是如果您没有它，那么购物车就会和子程序的宽度一样长，这可能是可取的，也可能是不可取的。

Answer 3

只需从这里删除“活动”即可。

$(".shopping-cart").stop(true, true).removeClass("active");

对这一个

$(".shopping-cart").stop(true, true).removeClass("");