javascript - 通过 JS 开启 CSS 效果
问题描述
当在图像上找到鼠标指针时,我有以下代码会触发某种效果:
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 0;
}
.card-container {
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back {
background: #eaeaed;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
<div class="card-container">
<div class="card">
<div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div>
<div class="side back">Jimmy Eat World</div>
</div>
</div>
当您按下按钮而不是当您将鼠标移到图像上时,如何使效果开始?
提前致谢!
解决方案
在 mousedown 将与类更改结合使用。从 css 中删除 .card:hover 并将其替换为
.card.flip {
transform: rotateY(180deg);
}
将按钮添加到 html 中,例如:
<button id="trigger">Press</button>
比添加 JS 来更改类。这是一个 jQuery 示例:
$('#trigger').mousedown(function() {
$('.card').addClass('flip');
}).mouseup(function(){
$('.card').removeClass('flip');
});
这将翻转 .card div 中的所有图像,只需按下一个按钮 。释放按钮时将翻转回来。您可以使用以下方法通过按钮单击保持翻转:
$('#trigger').click(function() {
$('.card').toggleClass('flip');
});
推荐阅读
- c - 我的阶乘 c 程序在输出框中没有给出任何值,尽管它没有显示错误
- jquery - 如何使用 Ajax 数据源对每个新请求进行 select2 下拉列表?
- java - 在 Microsoft Edge 浏览器中重定向时 HttpServletRequest 会话过期
- python - python:如何删除字符串中特定字符之后的每个字符?
- r - 从两组中随机取相同数量的元素——从一个数据帧中创建两个具有相同数量元素的子数据帧
- c# - 如何在 C# .net win 表单中为自定义 AplicationEvent 注册事件处理程序?
- xcode - Xcode 管理器复制失败
- linux - 后台运行Linux命令,关闭SSH后继续运行
- c++ - Gcc 检查给定的类是否有 operator+
- python - 将 sqlalchemy 和 Sqlite 与多处理一起使用