Fatal编程技术网
  • css/
  • Css 将分层、鼠标悬停的图像置于最前沿

Css 将分层、鼠标悬停的图像置于最前沿

css

Css 将分层、鼠标悬停的图像置于最前沿,css,Css,我有8个图像相互层叠（在级联设计的孩子）。当这8个图像中的任何一个被鼠标移过时，它需要位于其他图像的最前端并调整大小，以便覆盖后面的层叠 我知道当鼠标移到图像上方时如何调整图像大小，但我不知道如何将其置于其他图像之前 HTML: <body> <div id="container"> <div id="apDiv1"><img src="images/redballoons.jpg" width="800"

我有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>
…以此类推，再添加6个apdiv。

为悬停在图像上的z-index提供比可能覆盖它的任何其他对象更高的
z-index值

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


img:hover{
z-index: 100;
}



确保悬停的img上的z索引高于其他的，这将使其位于最前面。
尝试以下操作：


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


或在CSS中：


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



给你的
div
s提供一个公共类（比如
apDiv
），这样你就不会在CSS代码中重复太多。

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