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

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>

Answer 2

听起来你想要添加一些 javascript。

我推荐使用 jQuery 库。 https://jquery.com/

在这里你可以找到一堆不同的淡入淡出效果和文档 http://api.jquery.com/

Answer 3

使用 jQuery：

 $('a').hover(function(){
      $(this).children().fadeOut(100, function(){
        $(this).children().remove();
      });
      $(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
    }, function(){
      $(this).children().fadeOut(100, function(){
        $(this).children().remove();
      });
      $(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
 });

a {
  display: block;
  width: 300px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
  A link
  <img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>

一些简单的示例，但您必须解决图像淡入的问题，而第一张图像淡出。但是上面的帖子通过 css 有更好的解决方案。

Answer 4

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

如果这是你的意思？或者你在找什么？我尽力回答。