悬停相关的两个元素的行为：当A或B悬停时显示A

Question

这是我的CodePen demo ，您也可以在下面运行代码段。

在原始脚本中，多维数据集的正面是一个滑块，当我将鼠标悬停在信息框中时，它显示了它的右侧带有一些描述（<p>和<a>）。

预期的行为是只要用户停留在描述上，该元素就会保持.hover函数中提供的$('#info-box').hover()类

所有工作正常，直到我在chrome上测试它：（...

根据我的理解，它似乎会在悬停时触发多个mouseOver/mouseOut事件，并且会混乱并闪烁一切。

我应该使用setTimeout吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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#

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是我在父元素上使用了backface-visibility: hidden。 （请参阅代码段中的注释行）

疯狂，但这解决了我在Chrome浏览器上的问题，现在一切正常。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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#

＆＃13;

＆＃13;

＆＃13;