如何在悬停时使图像显示缓慢

Question

我的网站上有一个购物车，我制作了一种图片作为图片，在购物车后面显示为免费：悬停。

但是我想知道如何让这个物体逐渐淡出/慢慢显现：悬停，而不是现在的瞬间。

我试图从我的网站复制html和css，但在jsfiddle看起来很糟糕。 http://oliver.kaspertoxvig.dk/

Answer 1

我不确定这是否是首选的方法，但是如果你使用的是jQuery库，这应该可以解决问题：

$(function () {
  $(".cart-css-class").hover(
  function () {
    // Fade in on hover
    $(this).stop().animate({ "opacity": "1" }, "slow");
  },
  function () {
   // Fade out when no longer hover
   $(this).stop().animate({ "opacity": "0" }, "slow");
  });
}); 

这假设您的元素具有css类cart-css-class。要在加载时隐藏它，您应该应用此CSS：

.cart-css-class {
    opacity: 0;
}