如何在透明图像上翻转？

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添加一个背景。 小提琴

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

Answer 2

在我看来，你做错了。 img.b应该具有不透明度0 at：not（：hover）和opacity 1 at：hover，但你所做的只是设置$（this）的不透明度，这是img.a

这是我的重新工作......我没有使用悬停，因为我对语法感到困惑

这是我的小提琴/ 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;
}