淡入淡出对div悬停的影响？ [英] Fade effect on div hover?

问题描述

淡入淡出对链接悬停的影响？

我做了这个： http://jsfiddle.net/felipelalli/ ns9d1vug /

 < div class =fade/> 
 
 .fade {
 -o-transition：0.3s; 
 -moz-transition：0.3s; 
 -khtml-transition：0.3s; 
 -webkit-transition：0.3s; 
 -ms-transition：0.3s; 
转换：0.3s; 
 
 width：128px; height：128px; 
 background：url（'http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png'）
} 
 
。fade：hover { 
颜色：＃b50000; 
 width：128px; height：128px; 
 background：url（'http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png'）
} 
  

为什么在Chrome浏览器中可以正常工作，而不是在Firefox？

解决方案

它不在FF中工作，因为Firefox不支持转换背景图像，只有背景颜色。
如果你想转换一个背景图片，可以使用两个单独的< div> ：

div class =snippetdata-lang =jsdata-hide =false>

  .fade div {-o-transition：0.3s; -moz-transition：0.3s; -khtml-transition：0.3s; -webkit-transition：0.3s; -ms-transition：0.3s; transition ：0.3s;宽度：128像素;高度：128像素;位置：绝对的;顶部：0; left：0;}。fade {position：relative;宽度：128像素;高度：128像素; } .backone {z-index：1;背景：网址（ http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png）; } {.backtwo背景：URL（ http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png）;不透明度：0; z-index：5;}。fade：hover .backtwo {opacity：1;}。 pre class =snippet-code-html lang-html prettyprint-override> < div class =fade>< div class =backone>< / div>< div class =backtwo>< / div>< / div>  

Following examples found on Fade Effect on Link Hover?

I made this: http://jsfiddle.net/felipelalli/ns9d1vug/

<div class="fade"/>

.fade {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;

 width:128px;height:128px;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')
}

.fade:hover {
color: #b50000;
    width:128px;height:128px;
 background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')
}

Why it works fine in Chrome but not Firefox?

解决方案

It isn't working in FF, because Firefox does not support transitioning a background image, only background-color. If you want to transition a background image, use two separate <div>:

.fade div {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
 width:128px;
  height:128px;
  position:absolute;
  top:0;
  left:0;
}
.fade{
  position:relative;
  width:128px;
  height:128px;
  }
.backone{
  z-index:1;
  background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png');
  }
.backtwo{
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png');
  opacity:0;
z-index:5;
}
.fade:hover .backtwo{
opacity:1;
}
.fade:hover .backone{
opacity:0;
}

<div class="fade">
<div class="backone"></div>
<div class="backtwo"></div>
</div>

这篇关于淡入淡出对div悬停的影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！