在检查器中,标签仍然在正确的位置突出显示,我对发生的事情一头雾水。我试过添加一个::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;
});
最佳答案
我用全 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));
}
}
}
密码本:
关于jquery - 添加类并在 X 轴上进行 3d 变换后 anchor 标记不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27611863/