Question

当用户像http://demo.woothemes.com/storefront/一样徘徊时，我尝试制作我的迷你购物车（就像在这个页面上https://www.foodspring.de/）动画一样，但我不知道我怎么做到这一点？有人知道答案吗？我已经使用slideUp和slideDown进行了尝试，但它不起作用。

谢谢！

Answer 1

您可以简单地使用CSS作为此问题的解决方案。

当您悬停购物车标题时显示列表的一个小例子：

HTML：

<a class="cart">
    <span>Cart title</span>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</a>

CSS：

.cart ul {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    margin-top: -10px;
    display: none;
}

.cart:hover ul {
    margin-top: 0;
    display: block
}

如您所见，带有产品的列表仅在:hover .cart

时显示

Answer 2

像这样？编辑：不确定为什么内容css没有正确显示，它应该显示购物车图标。

＆＃13;

.count:after{
  content:"\f291"
  }
.count:hover{
  color:green
  }

＆＃13;

<div>
 <span class="count"></span>
  </div>

＆＃13;

在标题中的minicart上为slideDown（）和slideUp（）设置动画

2 个答案: