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

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

如果你不像详细in this blog post on crossfading images那样反对它，你可以使用CSS过渡来实现这一点：

/* 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>

示例

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

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