帶來分層，在圖像上被掩蓋前沿

我有8個圖像相互層疊（在級聯設計的孩子）。當這8張圖像中的任何一張被淹沒時，它需要到達其他圖像的最前沿，並調整大小，以便覆蓋其後的級聯。帶來分層，在圖像上被掩蓋前沿

我想通了如何調整圖片大小，但我不知道如何將它放在其他圖片前面。

HTML：

<body> 
     <div id="container"> 
      <div id="apDiv1"><img src="images/redballoons.jpg" width="800" height="600"> </div> 
      <div id="apDiv2"><img src="images/orangeballoons.jpg" width="800" height="600">    </div> 
      <div id="apDiv3"><img src="images/yellowballoons.jpg" width="800" height="600"></div> 
      <div id="apDiv4"><img src="images/greenballoons.jpg" width="800" height="600"></div> 
      <div id="apDiv5"><img src="images/blueballoons.jpg" width="800" height="600"></div> 
      <div id="apDiv6"><img src="images/purpleballoons.jpg" width="800" height="600"></div> 
      <div id="apDiv7"><img src="images/whiteballoons.jpg" width="800" height="600"></div> 
      <div id="apDiv8"><img src="images/blackballoons.jpg" width="800" height="600"></div> 
</div>

CSS：

body 
{ 
background-color: #00CCFF; 
margin-top: 15pt; 
margin-bottom: 15pt; 
margin-right: 10%; 
margin-left: 10%; 
} 

img 
{ 
border: 5px solid; 
} 

img:hover 
{ 
transform: scale(1.75) 
} 

#apDiv1 
{ 
position: absolute; 
width: 800px; 
height: 600px; 
z-index: 1; 
left: 125px; 
top: 15px; 
} 

#apDiv2 
{ 
position: absolute; 
width: 800px; 
height: 600px; 
z-index: 2; 
left: 175px; 
top: 65px; 
}

...等與6個apDivs。

來源

2014-07-20 Jessica Snapke

舉一個常見的類到你的'div's（如'apDiv'），所以你不要重複自己CSS代碼如此之多。 – rvighne

給予懸停的圖像比其他可能覆蓋它的值高z-index。

爲了保證安全，請將z-index: 9999;添加到您的img:hover規則中。

來源

2014-07-20 17:31:41 rvighne

img:hover{ 
z-index: 100; 
}

確保徘徊的img上的z-index高於其餘，這將使它在前面。

來源

2014-07-20 17:32:46 Jay

嘗試這樣：

$("#apDiv1").css("z-index", "9999");

或者在CSS：

img:hover 
{ 
transform: scale(1.75); 
z-index: 9999; 
}

來源

2014-07-20 17:38:54 AmanVirdi

帶來分層，在圖像上被掩蓋前沿

回答

相關問題