改变图像悬停，但不改变图像位置

我想改变悬停的图像，它应该是非常直接的，但由于某种原因，它不改变图像也我注意到有一种抽搐。改变图像悬停，但不改变图像位置

的jQuery：

$('#first_default_circle').hover(
    function() { 
     $(this).find('.default').hide(); 
     $('#first_default_circle_hover.default_hover').show(); 
    }, 
    function() { 
     $('#first_default_circle_hover.default_hover').hide(); 
     $(this).find('.default').show(); 
    });

CSS：

.default { 
    height: 86px; 
    left: 280px; 
    top: 50px; 
    width: 86px; 
} 
img { 
    position: absolute; 
    background:#000; 
} 
.default_hover { 
    display: none; 
    height: 119px; 
    left: 261px; 
    top: 40px; 
    width: 119px; 
}

的jsfiddle：http://jsfiddle.net/squidraj/Z6rNF/

请任何形式的帮助是非常事先appreciated.Thanks。

来源

2013-08-27 Prithviraj Mitra

FIDDLE

$("#circle").hover(

function() { 
    $('.default').hide(); 
    $('.default_hover').show(); 
}, 

function() { 
    $('.default_hover').hide(); 
    $('.default').show(); 
});

HTML

<div id="circle"> 
    <img src="http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png" class="default"> 
    <img src="http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png" class="default_hover"> 
</div>

或者，如果你喜欢用一些淡入淡出效果：

FIDDLE

来源

2013-08-27 15:02:11 Sbml

非常感谢。你是一个明星...是否可以添加动画（）速度和不透明度请。 –

只看到我的答案的最后一个链接只是使用fadeOut和fadeIn，例如$（'。默认'）淡出（250）。 $（ 'default_hover'）淡入（500）。 – Sbml

喜欢这个http://jsfiddle.net/sbml/Z6rNF/5/ – Sbml

$('#first_default_circle').mouseenter(function() { 

    $('.default').attr('src','http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png') 
}).mouseleave(function() { 

    $('.default').attr('src','http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png') 
});

我强烈建议使用mouseenter，mouseout函数，因为它们只有在您进入和离开某个元素时才会触发。

来源

2013-08-27 14:46:20 Tschallacka

您还需要填充newimgurl。因此： newimgurl =“images/yourfile.png”; – Frisbetarian

我会尝试一下。谢谢。 –

$('#first_default_circle').mouseenter(function(){ 
$('#first_default_circle').find('img').attr("src","http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png"); 
}); 

$('#first_default_circle').mouseleave(function(){ 
$('#first_default_circle').find('img').attr("src","http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png"); 
});

您可以使用类似这样的而不是你的jQuery脚本

更新的链接的http://jsfiddle.net/Z6rNF/3/

来源

2013-08-27 14:57:28 Sathiyamoorthy

它接近......是否有可能让第二张图像变大但保持在同一位置？ –

更新后的代码http://jsfiddle.net/Z6rNF/6/ – Sathiyamoorthy

谢谢Sathya.If你看到@sbml的解决方案，那就是我正在尝试做的那个。 –

你的选择不正确：

$('#first_default_circle_hover.default_hover')

应该是：

$('#first_default_circle_hover .default_hover')

我也清理了一下你的CSS。

工作演示：http://jsfiddle.net/Z6rNF/1/

来源

2013-08-27 14:58:31 Western

Thanks.But由于某种原因，第二个图像下降。可以在第一个图像位置相同。 –

改变图像悬停，但不改变图像位置

回答

相关问题