複数のオブジェクトが変形されたonHoverを変換する

Question

同じクラスで異なるdivを配置しようとすると、onHoverが上に置かれても正しく動作しません。私jsfiddleで

あなたは緑の部分上にカーソルを移動しようとすることができます：これはcurcusへの "ポインタ"

jsFiddleを変更しません：https://jsfiddle.net/bh6n7v3n/

HTML：

<div class="wrapper"> 
    <div class="content"> 
    <div class="inner_content"></div> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<div class="wrapper"> 
    <div class="content"></div> 
</div> 
<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 

CSS：

.wrapper{ 
    position: absolute; 
    top: 50vh; 
    left: 50vw; 
} 

.content{ 
    height: 200px; 
    width: 200px; 
    position: relative; 

    transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    -ms-transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    -webkit-transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 
    transform: rotateX(65deg) rotateY(0deg) rotateZ(-44deg); 

    transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 

    cursor: pointer; 
    background: rgba(255,0,0,0.2); 
    border: 2px solid black; 
} 

.inner_content{ 
    height: 100px; 
    width: 100px; 
    background:green; 
    margin: 50px; 
} 

JS：

$(document).ready(function() { 
    var svgArray = $(".wrapper"); 

    var startValue = 50; 
    var interval = 20; 
    var startTranslationValue = startValue - (Math.ceil((svgArray.length-1)/2)*interval); 

    for (var i = 0; i <= svgArray.length - 1; i++) { 
     svgArray.eq(i).css('transform', 'translateX(-50%) translateY(-' + startTranslationValue + '%)'); 
     startTranslationValue += interval; 
    } 
}); 

ヒント？

Answer 1

を

あなたのラッパーはあなたの内側のdivの前にあり、ホバーの状態をブロックしていると思います。

このCSSを試してみてください。でも、「innercontent」、（カーソルはポインタに変更）https://jsfiddle.net/jurdkyz4/

Answer 2

divの内容が重複していて、どのdivが上に乗っているのかわからないからだと思います。

私は、クラスタの外「.innercontent」を作るために、コードを少し変更して、あなたはそれの上に置くとあなたが見ることができるように、あなたはpointerカーソルを取得：

.inner_content{ 
    height: 100px; 
    width: 100px; 
    background:green; 
    margin: 420px 50px 50px 50px; 

} 

https://jsfiddle.net/bh6n7v3n/1/