Javascript 悬停时变换多个混乱的对象

当我尝试将具有相同类的不同div放置在彼此上方时，当悬停在上面时，onHover无法正常工作

在我的JSFIDLE中，您可以尝试将光标悬停在绿色部分上：这不会将curcus更改为“指针”

jsFiddle：

HTML:

JS:

$（文档）.ready（函数（）{
var svgArray=$（“.wrapper”）；
var起始值=50；
var区间=20；
var startTranslationValue=startValue-（数学单元（（svgArray.length-1）/2）*区间）；
对于（var i=0；i我认为这是因为div的内容是重叠的，并且您无法分辨哪个div被悬停在哪个div上

我稍微修改了代码，使“
.innercontent
”位于集群之外，当您将鼠标悬停在它上面时，可以看到一个
指针
光标：

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

}

我认为这是因为包装器位于内部div前面，阻止了悬停状态

尝试使用以下css：

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

您可以在此处进行测试：
但我的观点是，即使“innercontent”重叠，它也应该是“可悬停的”（光标变为指针）。当我在innercontent上悬停时，可能是在另一个红色“content”上悬停。这也应该会改变我的光标。谢谢，这解决了问题！
$( 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;
    }
});

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

}

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