Question

我有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。

Answer 1

为悬停图像提供比其他任何可能覆盖的图像更高的z-index值。

为了安全起见，请将z-index: 9999;添加到您的img:hover规则中。

Answer 2

img:hover{
z-index: 100;
}

确保悬停img上的z-index高于其余部分，这将把它带到前面。

Answer 3

尝试这样的事情：

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

或者在CSS中：

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

将图像分层，将图像置于最前方

3 个答案: