jquery，交換除了採取行動之外的所有元素的z-index

Question

我有一個問題，因爲主題名稱說：可以說我有4張照片在網站上，他們已經設置z-index在這個div中的所有圖像。無論如何，我想讓我的行動擴大點擊圖像，強制其餘圖像的Z指數下降（因爲我在黑色背景中使用褪色作爲圖像視圖的一部分）

在此先感謝

<div id="main"> 
    <div id="masthead"> 
     <a href="#">click</a> </div> 
    <div id="top_nav"> 
     <a href="http://www.google.pl">Start</a> <a href="http://www.google.pl"> 
     Opis</a> <a href="http://www.google.pl">Projekty</a> 
     <a href="http://www.google.pl">Zdjecia</a> 
     <a href="http://www.google.pl">Linki</a> <a href="http://www.google.pl"> 
     Kontakt</a> </div> 
    <div id="content"> 
    <div id="textfield"> <p>Profesjonalny web design. </p> 
    <span id="left"><a href="#">&#8592;</a></span> 
    <span id="right"><a href="#">&#8594;</a></span> 
    </div> 
    <img id="second" src="model.jpg" alt="model" /> 
    <img id="third" src="model.jpg" alt="model" /> 
    <img id="fourth" src="model.jpg" alt="model" /> 
    <img id="first" src="model.jpg" alt="model" /> 
    </div> 
    <div id="box"></div> 
</div> 
<div id="blackb"></div> 

CSS

body { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana; 
    background: silver url(bodygrad2.jpg) fixed;; 
} 
#main { 
    width: 1280px; 
    margin: 0 auto; 
    padding-bottom: 10px; 
} 
#masthead { 
    height: 40px; 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(gray), to(black)); 
    opacity: 0.3; 
    margin-bottom: 4px; 
    color: white; 
    text-align: center; 
    padding-top: 20px; 
} 
#masthead a{ 
    color: white; 
    display: block; 
    text-decoration: none; 
} 
#masthead a:hover{ 
    color: #FFFF66; 
    display: block; 
    text-decoration: none; 
} 

#top_nav { 
    width: 100%; 
    background: transparent; 
    border-bottom: 1px solid #BFBB04; 
} 
#top_nav a { 
    text-decoration: none; 
    color: #a7a236; 
    font-family: GraublauWeb; /* "Brush Script Std"; */ 
    font-size: 120%; 
    padding: 0 5px; 
} 
#top_nav a:hover { 
    color: #cfc944; 
} 
#content { 
    height: 20px; 
    width: 1px; 
    background: gray url(content.jpg) 0 0 no-repeat; 
} 
#content div#textfield{ 
    display: none; 
    position: absolute; 
    top: 15%; 
    right: 104px; 
    width: 310px; 
    height: 200px; 
    border-bottom: 1px solid black; 
    border-right: 1px solid black; 
    background: #484B55; 
    color: #CCCCCC; 
    opacity: 0.5; 
    z-index: 9; 
} 
#content div#textfield p{ 
    margin: 10px; 
} 
#content span#left{ 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
#content span#right{ 
    display: block; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 
#content span a{ 
    text-decoration: none; 
    color: #CCCCCC; 
} 
#content img { 
    position: absolute; 
    top: 50%; 
    right: 50%; 
    display: none; 
    width: 160px; 
    height: 116px; 
    border: 2px solid white; 
    z-index: 10; 
} 
#content img:hover { 
    width: 164px; 
    height: 120px; 
    opacity: 0.9; 
} 
#content img#second { 
    right: 35%; 
} 
#content img#third { 
    right: 20%; 
} 
#content img#fourth { 
    right: 5%; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    text-align: center; 
    width: 100%; 
    background: #ECE7E6; 
    border-top: 1px solid #BBBFC8; 
    font: 80% italic Arial,Verdana, sans-serif; 
    color: silver; 
    line-height: 1em; 
    padding-bottom: 0.1em; 
    z-index: 15; 
} 
#box { 
    position: absolute; 
    top: 40px; 
    left: 0; 
    width: 60px; 
    height: 60px; 
    background: red; 
    opacity: 0.5; 
    z-index: 6; 
} 
#blackb{ 
    display: none; 
    position: absolute; 
    top: 0; 
    width: 1280px; 
    height: 888px; 
    background: black; 
    opacity: 0.7; 
    z-index: 9; 
} 

Answer 1

我們需要2個指數水平爲這個看的權利，懸停這始終是上面和中間點擊，這樣的：

#content img:hover { 
    z-index: 12; 
} 
#content img.clicked { 
    z-index: 11; 
} 

然後，當點擊就可以申請這個類和使用.addClass()和.removeClass()這樣從以前的元素移除：

$(function() { 
    $("#content img").click(function() { 
    $(this).addClass('clicked').siblings('img').removeClass('clicked'); 
    });​​​​ 
}); 

You can give it a try here。