html - 鼠标悬停不会在旋转的 div 上注册

Question

我正在使用 css3 transform rotateY 翻转一个 div。 div 的背面有一个按钮。它在大多数情况下工作正常，但在 div 完全旋转后不会立即注册鼠标悬停几次。

HTML 悬停计数:

<flip-tile heading="Free Test" message="Take FREE TEST to earn embibium crystals!" status="'locked'" class="ng-isolate-scope">
    <div class="flip-holder locked" ng-class="status">
      <div class="front">
        <h3 class="title ng-binding">
          Free Test
        </h3>
        <img alt="Flip Button" class="flip-button" src="/assets/ts_metro_theme/flip-btn.png"><i class="lock-button fa fa-lock"></i><!-- ngIf: stats.rating=='champ' --><span class="count">2 of 3</span>
      </div>
      <div class="back ng-scope" ng-if="status=='locked'">
      <div class="buy-holder">
        <span class="ng-binding">Click to unlock all JEE Main tests for</span><!-- ngIf: price --><button ng-if="price" class="ng-scope ng-binding"><i class="fa fa-rupee"></i>999</button><!-- end ngIf: price -->
      </div>
      <img alt="flip-btn" class="flip-button" src="/assets/ts_metro_theme/flip-btn.png">
    </div>
    </div>
  </flip-tile>

CSS

flip-tile {
  display: inline-block;
  position: relative;
  font-family: 'Open sans', 'Quicksand', Helvetica;
  width: 150px;
  height: 180px; }

flip-tile .flip-holder,
flip-tile .front,
flip-tile .back {
  width: inherit;
  height: inherit; }

flip-tile span.count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 14px;
  display: none; }

flip-tile h3.title {
  margin-top: 10px;
  padding-left: 10px;
  font-weight: normal;
  font-size: 15px; }

flip-tile .back p {
  margin: 10px; }

flip-tile .lock-button {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: none; }

flip-tile .lock-button {
  display: none; }

flip-tile .locked .lock-button {
  display: inline-block; }

flip-tile .flip-button {
  position: absolute;
  bottom: 7px;
  left: 9px;
  width: 23px;
  display: inline-block; }

flip-tile .imp-chapter {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fbfdaa; }

flip-tile .back .tile-stats {
  margin: 27px 10px; }

flip-tile .buy-holder {
  text-align: center;
  margin-top: 48px;
  font-size: 14px; }

flip-tile .buy-holder span {
  display: block; }

flip-tile .buy-holder button {
  width: 100px;
  margin: 5px;
  background: transparent;
  border: 1px solid #fff;
  outline: 0;
  color: #fff; }

flip-tile .buy-holder button:hover {
  background-color: #fff;
  color: #444; }

flip-tile .front .champ-badge {
  width: 42px;
  position: absolute;
  bottom: 5px;
  right: 6px; }

flip-tile .back .tile-stats img {
  width: 17px; }

flip-tile .back .tile-stats > div {
  margin: 4px 0; }

flip-tile .back .tile-stats span {
  width: 106px;
  display: inline-block;
  text-align: right; }

flip-tile .flip-holder .front,
flip-tile .flip-holder .back {
  background-color: #aaa;
  color: #fff; }

flip-tile .locked .front,
flip-tile .locked .back {
  background-color: #888;
  color: #fff; }

flip-tile .started .front,
flip-tile .started .back,
flip-tile .fresh .front,
flip-tile .fresh .back {
  background-color: #29b8eb;
  color: #fff; }

flip-tile .good .front,
flip-tile .good .back {
  background-color: #55a417;
  color: #fff; }

flip-tile .average .front,
flip-tile .average .back {
  background-color: #f29c21;
  color: #fff; }

flip-tile .bad .front,
flip-tile .bad .back {
  background-color: #f22133;
  color: #fff; }

flip-tile .fa-repeat {
  position: absolute;
  top: 156px;
  left: 10px; }

flip-tile .flip-holder {
  -webkit-perspective: 100px;
  -moz-perspective: 100px;
  -ms-perspective: 100px;
  -o-perspective: 100px;
  perspective: 100px;
  height: inherit;
  width: inherit; }

flip-tile:hover .flip-holder {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg); }

flip-tile .flip-holder {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative; }

flip-tile .front,
flip-tile .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0; }

flip-tile .front {
  z-index: 2; }

flip-tile .back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg); }

js

var i=0;
$('flip-tile .back button').mouseenter(function(e){
    $('span.count').html(++i);
});

求助!提前致谢。

http://jsfiddle.net/HKWFL/

Answer 1

问题似乎是由父容器引起的，该容器似乎覆盖在旋转后退元素上的按钮顶部。我把你的 JS Fiddle 弄得一团糟，然后将它剥离回到它的基本要素(here)，问题仍然存在。我在谷歌上搜索了“3d 转换时模糊的元素”，发现了一些没有真正帮助的帖子；具体this page on stack overflow这让我来到了这个页面:

http://thewebrocks.com/demos/3D-css-tester/

在此页面上，构成旋转图像的元素始终保持可点击状态，因此我获得了源代码并对其进行了修改，因此它做了与您最初所做的相同的事情并且它有效但不会保持悬停状态。所以我将所有内容都包装在父元素中以保留悬停区域，然后问题又开始了!

这让我觉得旋转完成后父级正在遮挡后面的内容，所以我使用了 translateZ(10px) 的附加属性将其从父级偏移开现在完美运行。

这是 fiddle :

http://jsfiddle.net/chrissp26/AB8GG/1/

对于加价变化表示歉意，它需要被分解以确保没有其他东西干扰它。不过，您可以轻松地将 CSS 应用于您的原始解决方案。