Question

因此，在第一次参加当地编码俱乐部会议之后，我再次受到启发，再次调查jQuery并尝试复制其中一位发言者所谈论的内容。我已经对问题做了大致的总体思路，只是我似乎无法使图像（光标悬停在图像上）出现在未被覆盖的图像上。我认为调整z-index将有助于否定这一点，但似乎没有任何工作。

我已将文件等上传到http://www.downloadthatmovie.com/jquery/，以下是该页面的源代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Animation 3</title>
<style type="text/css">
    .imgOpa
    {
        height:200px;
        width:200px;
        opacity:0.5;
        filter:alpha(opacity=50);
        z-index:0;
    }
    article{
        padding:20px;
    }

    img{
        z-index:0;
    }
</style>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

</head>

<body>

<article>
  <p>
    <img class="imgOpa" src="img/image1.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image2.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image3.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image4.jpg" alt="Image 1"  />
    <img class="imgOpa" src="img/image5.jpg" alt="Image 1"  />
  </p>
</article>

<script type="text/javascript">
$(function() {
$('.imgOpa').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100);
    },
function() {
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100);
    })
  });
});
</script>

</body>
</html>

图像现在表现的方式可能看起来很奇怪，但我只是在解决一个更大的问题之前测试了一些东西。正如我之前所说，我希望光标悬停的图像高于其他图像。自从我上次接触jQuery以来已经有4个月了，但最终还是让自己醒了过来，并且正在重新认识它。

为每个人欢呼！

Answer 1

This SO thread在this post关于堆叠背景的情况下向我指出了这一点。只需添加

.imgOpa
{
    position: relative;
}

Answer 2

来自sitepoint z-index reference page的

：[z-index]指定位置值为绝对值，固定值或相对值之一的框的堆栈级别。

如何使用jQuery使图像显示在另一个上

2 个答案: