如何定位具有jquery懸停效果的圖像？

<script type='text/javascript' src='jquery.js'></script> 
<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; 

     z-index: 10; 
    } 

img.b { 
    position: absolute; 

    } 
</style> 
</head> 

<body> 

<div class="fadehover" align="center"> 
<img src="Facebook.png" alt="" class="a" /> 
<img src="Facebook_hover.png" alt="" class="b" /> 
</body>

所以我有這個圖像淡入淡出效果在我的形象，它工作正常。但我試圖將它放在我想要的位置，因爲現在它位於左上角。我怎樣才能將圖像定位在中心？或者一般我想要的地方？嘗試簡單的中心標籤，但沒有奏效。有任何想法嗎？如何定位具有jquery懸停效果的圖像？

來源

2011-10-14 Andreas Litis

使用CSS來定位。 –

將圖像放在.fadehover div內的自己的div內，並將位置樣式應用於它們而不是圖像。

編輯：代碼如下

<script type='text/javascript'> 
$(document).ready(function(){ 
$("div.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "slow"); 
}); 

}); 
</script> 
<style> 
div.fadehover { 
    position: relative; 
} 

div.a { 
    position: absolute; 
    z-index: 10; 
} 

div.b { 
    position: absolute; 
} 
</style> 
<div class="fadehover"> 
    <div class="a"><img src="yourimage1.ext" /></div> 
    <div class="b"><img src="yourimage2.ext" /></div> 
</div>

來源

2011-10-14 21:36:14

你能寫下來嗎？看來我正在犯錯誤.. –

看到我編輯的文章。 –

感謝您與我的瀏覽器正常工作！希望它能在所有的瀏覽器中。我剛剛使用剛剛編輯的代碼也是這一個： 'div.fadehover { position：relative; width：150px;/*用實際寬度替換*/ 餘量：45％; 保證金率：50％; margin-top：20％; }' –

要在中心位置的圖像，使用：

div.fadehover { 
    position: relative; 
    width: 200px; /* replace with actual width */ 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2011-10-14 21:39:11 marpetr

thanx！我也使用你的代碼 –

如何定位具有jquery懸停效果的圖像？

回答

相關問題