悬停依赖于两个元素的行为：悬停A或B时显示A

Question

here is my CodePen demo or you can run the snippet below.

In the original script, the front face of the cube is a slider, and when I hover my 'info-box' it shows the right side of it with some description ( <p> an <a> ).

The expected behavior is that as long as the user stays on the description, the element keeps having the .hover class given in the $('#info-box').hover() function

All was working fine until i tested it on chrome :(...

From what I understand, it seems to fires multiples mouseOver/mouseOut events when hovering and it messes and flicker everything up.

Should I use a setTimeout ?

 $('.slide-info').click(function() { $(this).parent().toggleClass('hover'); }) .hover(function() { $(this).parent().addClass('hover'); }, function() { $(this).parent().removeClass('hover'); }); $('.right').hover(function() { $(this).parent().parent().addClass('hover'); }, function() { $(this).parent().parent().removeClass('hover'); }); 

 h1 { text-align: center; } body { background-color: #333; } .Cube-container { width: 500px; top: 20px; height: 150px; perspective: 1000px; position: relative; margin-right: auto; margin-left: auto; transform-origin: 50% 50% -250px; } .Cube { transition: all .5s ease-out; transform-style: preserve-3d; backface-visibility:hidden; } .front, .right { height: 150%; text-align: center; padding-top: 10px; backface-visibility: hidden; } .Cube-container.hover .Cube { transform: rotateY(90deg); transform-origin: 50% 50% -250px; } .front { transform-style: preserve-3d; transition: all .5s ease-out; background-color: #fc8; position: relative; } .right { background-color: #8cf; position: absolute; top: 0px; left: 0px; height: calc(100% - 10px); /* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/ width: 100%; transform: rotateY(-90deg) translateX(-100%); transform-origin: 0 0; } .ol /* OverLay */ { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .slide-info { width: auto; height: auto; background-color: rgba(0, 0, 0, 0.5); padding: 0 15px; cursor: pointer; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Cube-container"> <div class="ol Cube"> <div class="ol right"> <h2>Right side</h2> <p>While we hover that side, parent element keeps having the .hover class, making it visible</p> </div> <div class="ol front"> <h2>Front</h2> <p>Hover the info box please :)</p> </div> </div> <div class="ol slide-info"> <h3>INFO</h3> </div> </div>http://stackoverflow.com/questions/ask# 

Answer 1

The problem was that I used backface-visibility: hidden on parent element. (see commented line in snippet)

Crazy but that solved my problem on Chrome browser, now everything works fine.

 $('.slide-info').click(function() { $(this).parent().toggleClass('hover'); }) .hover(function() { $(this).parent().addClass('hover'); }, function() { $(this).parent().removeClass('hover'); }); $('.right').hover(function() { $(this).parent().parent().addClass('hover'); }, function() { $(this).parent().parent().removeClass('hover'); }); 

 h1 { text-align: center; } body { background-color: #333; } .Cube-container { width: 500px; top: 20px; height: 150px; perspective: 1000px; position: relative; margin-right: auto; margin-left: auto; transform-origin: 50% 50% -250px; } .Cube { transition: all .5s ease-out; transform-style: preserve-3d; /*backface-visibility:hidden; <-- Causing the problem */ } .front, .right { height: 150%; text-align: center; padding-top: 10px; backface-visibility: hidden; } .Cube-container.hover .Cube { transform: rotateY(90deg); transform-origin: 50% 50% -250px; } .front { transform-style: preserve-3d; transition: all .5s ease-out; background-color: #fc8; position: relative; } .right { background-color: #8cf; position: absolute; top: 0px; left: 0px; height: calc(100% - 10px); /* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/ width: 100%; transform: rotateY(-90deg) translateX(-100%); transform-origin: 0 0; } .ol /* OverLay */ { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .slide-info { width: auto; height: auto; background-color: rgba(0, 0, 0, 0.5); padding: 0 15px; cursor: pointer; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Cube-container"> <div class="ol Cube"> <div class="ol right"> <h2>Right side</h2> <p>While we hover that side, parent element keeps having the .hover class, making it visible</p> </div> <div class="ol front"> <h2>Front</h2> <p>Hover the info box please :)</p> </div> </div> <div class="ol slide-info"> <h3>INFO</h3> </div> </div>http://stackoverflow.com/questions/ask#