小贝子编程

卡片翻转悬停并单击



我有一张可以悬停和点击的卡片;但是，有一个小故障。

单击卡片，然后从前面悬停时，悬停不会按预期工作。它正在翻转回到前面。悬停仅在悬停时从后面正确实现。

我在代码中缺少什么才能在没有悬停故障的情况下正确实现？

请帮助解决此问题。

document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .card').toggleClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;">&nbsp;</section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>

您必须使用鼠标事件。

选项 1：

添加mouseenter和mouseleave事件。(不要依赖CSS，在鼠标事件上添加/删除flip类(

document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip').toggleClass('flip-hover');
},
mouseenter: function() {
$('.card-flip .flip').addClass('flip-hover');
},
mouseleave: function() {
$('.card-flip .flip').removeClass('flip-hover');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip .flip-hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;">&nbsp;</section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>

这是一把小提琴。https://jsfiddle.net/nimittshah/gjhcwvk8/

选项 2：

如果你想在CSS中保留hover，你仍然需要mouseenter事件。(在mouseenter上添加flip类(

//document.querySelector(".card-flip").classList.toggle("flip");
$('.card-flip').bind({
click: function() {
$('.card-flip .flip-me').removeClass('flip');
},
mouseenter: function(){
$('.card-flip .flip-me').addClass('flip');
}
});
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
transform: rotateY(0deg);
}
.card-flip:hover .flip, .card-flip.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 480px;
-webkit-transform-style: preserve-3d;
}
.flip-me {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<section style="height:40px;">&nbsp;</section>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip-me flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Front Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Back Card</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img data-src="holder.js/100px180/?text=Image" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js'></script>
</body>

检查小提琴。https://jsfiddle.net/nimittshah/gjhcwvk8/1/

仅供参考，我在flip类上添加了新的类flip-me。

:)

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium