jquery - 添加类并在 X 轴上进行 3d 变换后 anchor 标记不可点击

Question

在检查器中，标签仍然在正确的位置突出显示，我对发生的事情一头雾水。我试过添加一个::before 伪元素，将 z​​-index 更改为 9999，并进行了大量的谷歌搜索。我创建了一个代码笔来演示这个问题，并在 JS 模块中注释掉了一些特定的注释。感谢您提供任何帮助。

这是使按钮翻转的标记、scss 和 js:

HTML:

    <div class="flip-container">
      <button class="story-button">
          <a class="front" href="http://google.com">Even A Button</a>
          <a class="back" href="http://google.com">Can Tell A Story</a>
      </button>
    </div>

SCSS:

// Story Button Styles
$StoryButtonWidth: 18em;
$StoryButtonHeight: 3em;
.flip-container {
    display: block; width: 100%; height: $StoryButtonHeight; margin: 0 auto; padding: 0 0; position: relative; background: transparent;
}
.story-button { 
    display: block; width: $StoryButtonWidth; height: $StoryButtonHeight; margin: 0 auto; padding: 0 0; position: relative; text-align: center; color: white; text-tranform: uppercase; text-decoration: none; z-index: 8000; @include flippy;
  > a { 
    display: block; width: 100%; height: $StoryButtonHeight; margin: 0 auto; padding: 0 1em; float: left; clear: both; text-align: center; text-transform: uppercase; line-height: $StoryButtonHeight; color: $black;
    // &::before {
    //  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
    // }
    &.front {
      background: $light-grey; z-index: 999; transform-origin: bottom center;
    }
    &.back { 
      position: absolute; top: ($StoryButtonHeight*-.5); background: darken($light-grey, 10%); z-index: -999; transform: rotateX(90deg) translate(0,(-$StoryButtonHeight/2)); transform-origin: center center;
    }
  }
   // Rotate The Cube
  &.flip {
    transform: rotateX(-90deg) translate(0,$StoryButtonHeight);
    // > a {
    //  &.back {
    //      z-index: 9999;
    //  }
    }
  }
}

JS:

// Flip Button
$('.flip-container').hover(function () {
      $(this).children('.story-button').toggleClass('flip');
      return false;
});

Example CodePen Link

Answer 1

我用全 CSS 解决方案解决了这个问题。之前我的标记太大了。

HTML:

<a href="http://google.com" target="_blank" class="story-button"><b aria-hidden="true">Face One</b><!--Face One Needs To Be Repeated Here To Make Flip Correctly, I put it in a <b> and se visibility:hidden; on it-->
  <span class="flip-container">
    <span class="front">Face One</span>
    <span class="back">Face Two</span>
  </span>
</a>

SCSS:

// Flippy Button
$StoryButtonHeight: 3em;

.story-button {
   display: inline-block; padding: 1em 2em; color: $white; position: relative; font-weight: bold; text-transform: uppercase; text-decoration: none;
  b {
    visibility: hidden;
  }
}

.flip-container {
  width: 100%; height: $StoryButtonHeight; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transition: $cubic250; 
  &:hover { 
    top: (-$StoryButtonHeight/2); transform: rotateX(-90deg);
  }
  span {
    display: block; width: 100%; height: 100%; position: absolute; text-align: center; line-height: $StoryButtonHeight;
    &.front {
      top: 0; left: 0; background-color: red; transform: rotateX(0deg) translateZ($StoryButtonHeight);
    }
    &.back {
      top: ($StoryButtonHeight/2); left: 0; background-color: blue; transform-origin: center top; transform: rotateX(90deg) translateZ(($StoryButtonHeight/2));
    }
  }
}

密码本:

http://codepen.io/andandandandrew/pen/azmdxo?editors=110