How do rollover on transparent image?

Question

I tried many various methods, but didn't work.. What's wrong with my code? Please explain... help. My both images is transparent, with my idea on mouseover shoud fade new image. Current my code:

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

I believe to achieve your desired effect as I understand it you simply need to add a background to img.a. Fiddle

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

Answer 2

It seems to me you are doing the wrong thing. The img.b should have opacity 0 at :not(:hover) and opacity 1 at :hover, but all you are doing is setting the opacity of $(this) which is img.a

Here is my re-work... I didn't use hover because I get confused with the syntax

Here is my 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 - using 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 has found a very nice solution +1

Answer 3

ExceptionLimeCat solutions good but only for in bright/shiny/white backgrounds. Jaka Dirnbek way is better, because is more optimal.

Anyway.. Solved with this thing. But how this Jaka Dirnbek jquery use on link? Example:

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