Question

当我尝试将相同类别的不同div放在彼此之上时，onHover在悬停时无法正常工作。

在我的jsfiddle中你可以尝试将鼠标悬停在绿色部分上：这不会将curcus更改为＆＃34;指针＆＃34;

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/

转换多个对象乱搞onHover

2 个答案: