时间戳

首页 > 解决方案 > 如何鼠标悬停一个div，当另一个实际上悬停时，反之亦然

jquery - 如何鼠标悬停一个div，当另一个实际上悬停时，反之亦然

问题描述

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>

代码：

.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，但由于缺乏知识，我失败了。有人可以帮帮我。谢谢

标签： jquerycss

解决方案

这可能会起作用：

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

推荐阅读