3

我正在处理我的项目，但我在 css 中遇到了 z-index 问题。我已经用谷歌搜索了一整天，但还没有找到适合我的解决方案。问题是，我得到另一个 div 下的 div。它必须是带有 z-index 的东西。希望有人能找出我做错了什么......

$(".box").click(function() {
  $(this).css({
    "-webkit-transform-style": "preserve-3d",
    "background-color": "red",
    "box-shadow": "0px 0px 10px red",
    "-webkit-transition:": "all .2s ease-in",
    "zoom": "1",
    "z-index": "10",
    "-webkit-transform": "rotateY(0deg)"
  });

  $(this).mouseleave(function() {
    $(this).css({
      "-webkit-transform-style": "preserve-3d",
      "background-color": "blue",
      "box-shadow": "",
      "-webkit-transition:": "all .2s ease-out",
      "zoom": "",
      "z-index": "1",
      "-webkit-transform": "rotateY(45deg)"
    });
  });
});
#blue {
  -webkit-perspective: 600px;
}
#blue .box {
  position: absolute;
  zoom: 0.7;
  background-color: blue;
  -webkit-transform: rotateY(45deg);
  -webkit-transition: all .2s ease-out;
  z-index: 0;
  height: 100px;
  width: 200px;
  margin-left: 50px;
  margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blue" class="container" style="margin-left: 50px">
  <div class="box" id="first"></div>
</div>
<div id="blue" class="container" style="margin-left: 200px">
  <div class="box" id="second"></div>
</div>

我也把所有的东西放在了jsFiddle

4

1 回答 1

2

导致您悲伤的是父元素（.container）。由于它们的 html 顺序以及它们是静态定位的事实，第二个 .container 的子元素将始终位于第一个 .container 的前面。

如果这是您必须使用的 html 结构，请将“位置：相对”添加到 .container 默认 css 并根据您的事件单独调整它们的 z-index。

#blue {
    position:relative;
}

$(".box").click(function () {
    $(this).css({"-webkit-transform-style":"preserve-3d",
                 "background-color":"red",
                 "box-shadow":"0px 0px 10px red",
                 "-webkit-transition":"all .2s ease-in",
                 "zoom":"1",
                 "z-index":"10",
                 "-webkit-transform":"rotateY(0deg)"});

    this.parentNode.style.zIndex = '1';

        $(this).mouseleave(function() {
        $(this).css({"-webkit-transform-style":"preserve-3d",
                     "background-color":"blue",
                     "box-shadow":"",
                     "-webkit-transition:":"all .2s ease-out",
                     "zoom":"",
                     "z-index":"1",
                     "-webkit-transform":"rotateY(45deg)"});

         this.parentNode.style.zIndex = '0';

       });
    });

http://jsfiddle.net/aPKh6/10/

此外，不应该在多个元素上使用 id。它是无效的，它还限制了您使用 javascript 进行更有效的元素选择的能力。

当您将事件侦听器嵌套在侦听器的函数中时，也有可能一次触发多个事件，但我不知道 jQuery 是否会为您处理这个问题。我一直发现最好单独声明它们并使用标志来查看一个是否在另一个之前被解雇。

于 2013-02-02T04:28:51.313 回答