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强制状态之前的仔细检查时，就会触发回调。

如何将鼠标悬停在div上，而实际上悬停了另一个，反之亦然

2 个答案: