如何使用jQuery在另一個圖像上顯示圖像

因此，在第一次參加本地編碼俱樂部會議後，我開始重新研究jQuery，並嘗試複製其中一位發言人所談論的內容。我已經對問題的總體思路做好了，只是我似乎無法使圖像（即被光標懸停）出現在未被懸停的圖像上。我認爲調整z-索引將有助於否定這一點，但似乎沒有任何工作。如何使用jQuery在另一個圖像上顯示圖像

我已經將文件等上傳到http://www.downloadthatmovie.com/jquery/，這裏是頁面的源代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery Animation 3</title> 
<style type="text/css"> 
    .imgOpa 
    { 
     height:200px; 
     width:200px; 
     opacity:0.5; 
     filter:alpha(opacity=50); 
     z-index:0; 
    } 
    article{ 
     padding:20px; 
    } 

    img{ 
     z-index:0; 
    } 
</style> 

<script type="text/javascript" src="jquery-1.6.4.min.js"></script> 

</head> 

<body> 

<article> 
    <p> 
    <img class="imgOpa" src="img/image1.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image2.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image3.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image4.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image5.jpg" alt="Image 1" /> 
    </p> 
</article> 

<script type="text/javascript"> 
$(function() { 
$('.imgOpa').each(function() { 
$(this).hover(
function() { 
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100); 
    }, 
function() { 
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100); 
    }) 
    }); 
}); 
</script> 

</body> 
</html>

的圖像表現，現在可能看起來奇怪，但我只是測試的幾件事情的方式在我解決更大的問題之前。正如我前面所說，我想讓光標懸停的圖像位於其他圖像之上。自從我上次碰到jQuery以來，已經過去了4個月，但終於將自己踢了起來，並重新認識了自己。

大家歡呼！

來源

2012-03-11 Rob

This SO thread指出我在this post堆疊上下文。剛剛從sitepoint z-index reference page添加

.imgOpa 
{ 
    position: relative; 
}

來源

2012-03-11 06:25:51

爲幫助卡林達裏乾杯，我有時會忘記相對定位。無論如何，這修復了它:)。 – Rob 2012-03-11 06:34:21

：[z索引]指定的箱，其位置值是絕對一個，固定，或相對的疊層水平。

來源

2012-03-11 06:33:58

如何使用jQuery在另一個圖像上顯示圖像

回答

相關問題