用戶如何更改div的z-index？

Question

我目前正在嘗試創建鬆散堆疊的寶麗來照片形式的按鈕，我想要得到哪個寶麗來用戶鼠標來到堆頂。

我試圖用一個簡單的實現這一點：

#polaroid a hover{ 
z-index:15; 
} 

我認爲這可能，理論上，把寶麗來樁的頂部，因爲目前的「最高」寶麗來是的z-index ：13;

但是，這根本不起作用，我想我做錯了什麼，可能需要一些JavaScript來實現這一點。

我當前的代碼是...

HTML 

<a id="polaroid_home" href="index.html"></a> 
<a id="polaroid_about" href="index.html"></a> 
<a id="polaroid_portfolio" href="index.html"></a> 
<a id="polaroid_contact" href="index.html"></a> 

我已經將所有這些鏈接的index.html只是爲了測試。

CSS 

#polaroid_home{ 
position:absolute; 
width:175px; 
height:215px; 
left:670px; 
top:140px; 
background-image:url(../Images/polaroid-home.png); 
background-repeat:no-repeat; 
z-index:13; 
} 


#polaroid_home a:hover{ 
z-index:15; 

} 

#polaroid_about{ 
position:absolute; 
width:175px; 
height:215px; 
left:765px; 
top:175px; 
background-image:url(../Images/polaroid-about.png); 
background-repeat:no-repeat; 
z-index:12; 
} 

#polaroid_about a:hover{ 
z-index:15; 

} 

#polaroid_portfolio{ 
position:absolute; 
width:175px; 
height:215px; 
left:620px; 
top:255px; 
background-image:url(../Images/polaroid-portfolio.png); 
background-repeat:no-repeat; 
z-index:10; 
} 

#polaroid_portfolio a:hover{ 
z-index:15; 

} 

#polaroid_contact{ 
position:absolute; 
width:210px; 
height:235px; 
left:740px; 
top:310px; 
background-image:url(../Images/polaroid-contact.png); 
background-repeat:no-repeat; 
z-index:11; 
} 

#polaroid_contact a:hover{ 
z-index:15; 

} 

我使用JavaScript網頁的其他和我使用這個：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 

我不知道該怎樣使用JavaScript知識，讓我把那只是櫃面是很重要的。

我做了什麼明顯錯誤的或者這種方法不起作用？

有沒有什麼辦法可以通過CSS來實現這一點，如果沒有，JavaScript的代碼是什麼？

Answer 1

刪除' a'其中，例如，'#polaroid_contact a:hover'看起來像'#polaroid_contact:hover'。

Answer 2

一對夫婦的想法：

1. 將含有元素（母體，祖父母，等）需要具有position: relative以便創建用於position: absolute和z-index的座標系的工作。
2. 有幾個MSIE錯誤涉及這樣的東西，因此請檢查您需要支持的版本，然後確保它可以正常工作和/或適用於這些瀏覽器。