How to mouse hover a div, when another is hovered actually and vice versa

Question

HTML CODE:

 <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 CODE:

.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);
}

I am having more than ten item1 and item2 div's, in a grid layout. I need when item 1 is hovered, item 2 to be also have the hovered effect and vice versa. How to do this? I tried with JQuery, but due to lack of knowledge, I failed. Could someone help me out. Thankyou

@prakharlondhe it's not working with this solution – Vivek Nov 04 '18 at 08:28 — Vivek, Nov 04 '18 at 08:28

score 0 · Answer 1 · answered Nov 04 '18 at 06:27

0

This will probably work:

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

answered Nov 04 '18 at 06:27

Prakhar Londhe

1,431
1
12
26

This code didnt work – Vivek Nov 04 '18 at 07:20

Benjamín Vázquez · Answer 2 · 2018-11-04T18:32:17.773

0

There should not be problem using this

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

The callback is triggered when the mouse enters the .item1 element and the hover condition is just a double check before triggering the .item2 forced state

edited Nov 04 '18 at 18:32

answered Nov 04 '18 at 06:28

Benjamín Vázquez

340
2
12

Not working, should i do any changes in css. – Vivek Nov 04 '18 at 07:19
Mmm, for the structure of your question I thought the items divs had the hover style... change the selector on the code to `.item1 .flip-container` and `.item2 .flip-container` – Benjamín Vázquez Nov 04 '18 at 18:31

How to mouse hover a div, when another is hovered actually and vice versa

2 Answers2