Html 鼠标盖不';旋转div上的t寄存器
我正在使用css3转换旋转翻转一个div。在div的背面有一个按钮。它在大多数情况下工作正常,但在div完全旋转后,几次都不会注册鼠标 HTML 悬停计数:Html 鼠标盖不';旋转div上的t寄存器,html,css,Html,Css,我正在使用css3转换旋转翻转一个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
<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>
js
请帮忙!提前谢谢
问题似乎是由父容器引起的,该容器似乎覆盖在旋转后元素的按钮顶部。我把你的JS小提琴弄得一团糟,然后把它剥去了,只剩下基本的部分(),问题仍然存在。我在谷歌上搜索了“3d转换时模糊的元素”,发现了一些没有真正帮助的帖子;具体来说,这让我进入了这一页: 在这个页面上,组成旋转图像的元素始终保持可点击状态,所以我找到了源代码并对其进行了修改,这样它就完成了与您最初所做的相同的操作,并且工作正常,但不会停留在悬停状态。因此,我将所有内容包装在父元素中以保留悬停区域,然后问题再次出现 这让我觉得在旋转完成后,父对象遮挡了后面的内容,因此我使用了一个额外的属性
translateZ(10px)
将其从父对象偏移,现在它可以完美地工作
这是小提琴:
为加价的改变道歉,它需要被分解,以确保没有其他东西干扰它。不过,您可以轻松地将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); }
var i=0;
$('flip-tile .back button').mouseenter(function(e){
$('span.count').html(++i);
});