转换多个对象在hover上搞砸

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：

.wrapper{ 
    pointer-events: none; 
} 
.content{ 
    pointer-events: auto; 
} 
/* This css just to see the hover state */ 
.content:hover{ 
    background: red; 
} 

你可以在这里进行测试：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/