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;
}
题
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:
<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>
解决方案
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;
}
其他提示
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
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;
}