改變圖像懸停，但不改變圖像位置

我想改變懸停的圖像，它應該是非常直接的，但由於某種原因，它不改變圖像也我注意到有一種抽搐。改變圖像懸停，但不改變圖像位置

的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由於某種原因，第二個圖像下降。可以在第一個圖像位置相同。 –

改變圖像懸停，但不改變圖像位置

回答

相關問題