Question

我使用之前设计的购物车，但无法使用选项悬停shoppign购物车，这是一个代码示例。

我的代码

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

我需要购物车的内容在鼠标指针移出之前不要消失。

示例代码

请参阅Shopping Cart Dropdown上的Eduardo（@alexd2）的笔CodePen。

Answer 1

使用Multiple Selector将解决您的问题。

  $('#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("");

购物车与悬停下拉列表

3 个答案: