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の順序と静的に配置されているため、2番目の.containerの子要素は常に最初の.containerの前にあります。

これが使用する必要のあるhtml構造である場合は、.containerのデフォルトのcssに「position：relative」を追加し、イベントで個別に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 に答える