I have implemented a mouseover fade effect button using jQuery. However, I am facing an issue where the image fades to white instead of "img.b" as intended. Can anyone provide suggestions on why this may be happening?
$(document).ready(function(){
$("img.a").hover
( function() { $(this).stop().animate({"opacity":"0"}, "slow");
},
function() {
$(this).stop().animate({"opacity":"1"}, "slow");
});
});
Below is the CSS for reference:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
And here is the HTML code snippet:
<div class="fadehover">
<a href="#">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</a>
</div>