如何鼠标悬停一个div，当另一个实际悬停时，反之亦然[重复]

Question

HTML 代码：

 <div class="item1">
   <div class="flip-container">
     <div class="flipper">
       <div class="front">rabbit imagw</div>
       <div class="back">apple image</div>
     </div>
   </div>
  </div>
  <div class="item2">
   <div class="flip-container">
     <div class="flipper">
       <div class="front">rabbit</div>
       <div class="back">apple</div>
     </div>
    </div>
   </div>

CSS 代码：

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    margin: 0 auto;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front,
.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
}

.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.front .name {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

我在网格布局中有十多个 item1 和 item2 div。我需要在第 1 项悬停时，第 2 项也具有悬停效果，反之亦然。这个怎么做？我尝试使用 JQuery，但由于缺乏知识，我失败了。有人可以帮帮我。谢谢你

Answer 1

这可能会起作用：

$('.item1').hover(function(e) {
    $('.item2').hover();
})

Answer 2

使用这个应该没有问题

$('.item1 .flip-container').on('mouseenter', function() {
  if($(this).is(':hover')) {
    $('.item2 .flip-container').trigger('mouseenter');
  }
});

当鼠标进入.item1元素时触发回调，并且悬停条件只是触发.item2强制状态之前的双重检查