html - 如何在鼠标悬停时添加淡入淡出效果

Question

我正在使用它来创建鼠标悬停效果:

<a href="http://glim.pt/produtos/cadeiras">
    <img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
     onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
     onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
    </img>
</a>

但是我想要它是平滑的，我该如何添加淡入淡出效果呢？它用于 Wordpress 页面。

Answer 1

如果您不反对它，您可以使用 CSS 转换来完成此操作，详见 in this blog post on crossfading images :

/* A wrapper for your images to transition */
.transition-wrapper {
  position:relative;
  height:300px;
  width:300px;
  margin:0 auto;
}

/* Position each image and apply a transition */
.transition-wrapper img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
  opacity:0;
}

然后相应地更新您的标记:

<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras"> 
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>

示例

/* A wrapper for your images to transition */
.transition-wrapper {
  position:relative;
  height:300px;
  width:300px;
  margin:0 auto;
}

/* Position each image and apply a transition */
.transition-wrapper img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
  opacity:0;
}

<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras"> 
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>