【问题标题】:How to add fade effect on mouseover如何在鼠标悬停时添加淡入淡出效果
【发布时间】:2017-02-06 16:40:05
【问题描述】:

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

<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 页面。

【问题讨论】:

标签: html css wordpress mouseover fade


【解决方案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>

【讨论】:

  • 非常感谢您的帮助 Rion,但它不起作用:(我将 css 代码添加到 style.css 文件中,并在我的页面上使用了 html 代码,但两张图片出现在同时,一个在另一个之上,而不是鼠标悬停
  • 您可能希望确保这不是缓存问题,并且您的样式实际上得到了正确应用。尝试使用开发人员工具 (F12) 来检查图像,看看您是否可以在 &lt;a&gt; 元素上看到 .transition-wrapper 样式。
【解决方案2】:

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

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

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

【讨论】:

    【解决方案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 有更好的解决方案。

    【讨论】:

    • 谢谢 Alex,但我该如何使用呢?我应该在哪里粘贴 jQuery 代码,我应该在我的 Wordpress 页面上使用什么代码来在那里显示图像?
    【解决方案4】:
    <div class="fadehover">
    <img src="cbavota-bw.jpg" alt="" class="a" />
    <img src="cbavota.jpg" alt="" class="b" />
    </div>
    

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

    【讨论】:

      猜你喜欢
      • 2013-08-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多