如何在透明圖像上滾動？

Question

我嘗試了很多種方法，但都沒有工作..我的代碼有什麼問題？請解釋...幫助。我的兩張圖片都是透明的，我的想法是在鼠標懸停之後淡出新圖像。目前我的代碼：

DEMO DEMO2

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 

}); 
</script> 

<style> 
div.fadehover 
{ 
    position: relative; 
} 

img.a 
{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
} 

img.b 
{ 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
</style> 


     <div class="fadehover"> 
      <a href="informacija.php"><img src="images/informacija.png" alt="Informacija" class="a"/></a> 
      <a href="informacija.php"><img src="images/informacija_hover.png" alt="Informacija" class="b"/></a> 
     </div> 

Answer 1

我相信以達到你想要的效果，因爲我理解它，你只需要添加背景img.a。 Fiddle

img.a{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    background:#fff; 
    } 

Answer 2

在我看來，你做錯了事情。 img.b應該有不透明度爲0：不是（：懸停）和不透明度1在：懸停，但你所做的只是設置$（this）的不透明度，這就是img.a

這是我重新設計的，工作...我沒有使用懸停，因爲我感到困惑的語法

這裏是我的fiddle/jsbin

HTML

<div class="fadehover"> 
    <a href="#"> 
     <img src="http://csrelax.lt/images/informacija.png" alt="Informacija" class="a"/> 
    </a> 
    <a href="#"> 
     <img src="http://csrelax.lt/images/informacija_hover.png" alt="Informacija" class="b"/> 
    </a> 
</div> 

CSS

div.fadehover 
{ 
    position: relative; 
} 

img.a 
{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 10; 
} 

img.b 
{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 0; 
} 

JS - 使用jQuery

$(document).on('mouseenter', 'img.a', function() { 
    console.log('mouseenter'); 
    $(this).parent().next().find('.b').animate({"opacity": "1"}, "slow"); 
}); 

$(document).on('mouseleave', 'img.a', function() { 
    console.log('mouseleave'); 
    $(this).parent().next().find('.b').animate({"opacity": "0"}, "slow"); 
}); 

PS ExceptionLimeCat已經找到了一個非常好的解決方案+1

Answer 3

ExceptionLimeCat解決方案不錯，但僅適用於亮/閃亮/白色背景。 Jaka Dirnbek方式更好，因爲更優化。

無論如何..解決這個事情。但如何在鏈接上使用這個Jaka Dirnbek jquery？例如：

<div id="nav_virsus"> 
    <ul> 
     <li><a href="#"><img src="images/pagrindinis.png" alt="Main" /></a></li> 
     <li><a href="#"><img src="images/forumas.png" alt="Forumas" /></a></li> 
     <li><a href="#"><img src="images/unban.png" alt="Atsibaninti" /></a></li> 
     <li><a href="#"><img src="images/banai.png" alt="Banai" /></a></li> 
    </ul> 
</div> 

CSS：

#nav_virsus { 
    position:absolute; 
    top:71px; 
    right:50px; 
} 

#nav_virsus li 
{ 
    font-family: 'Anaheim', sans-serif; 
    font-size:14px; 
    text-transform:uppercase; 
    float:left; 
    padding:20px; 
} 

#nav_virsus li a 
{ 
    color:#b8d9ff; 
    text-decoration:none; 
    padding:20px 5px 20px 5px; 
} 

#nav_virsus li a:hover 
{ 
    background:url(../images/hover.png) repeat-x; 
    color:#000; 
    text-decoration:none; 
    padding:21px 5px 20px 5px; 
}