我正在使用CSS3悬停和过渡来显示和隐藏图像。在移动设备上，我想对触摸事件使用相同的过渡。
[基本上，第一次触摸将执行悬停效果或翻转，而向上触摸将执行滚降。
我想避免使用JavaScript来做到这一点。如果有一种使用纯CSS3的方法，那将是最佳选择。
在CSS中使用:active伪类，然后将ontouchstart=""和onmouseover=""添加到body标签。
以下代码摘自我的网站，其中的按钮在悬停（在PC上）或按住（在触摸设备上）时会变小并发出白色光。
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
以下编辑已不再相关，因为我删除了原始的，不正确的说明，但是如果您在此之前，这些说明可能仍然有用
EDIT：我发现，如果不是将ontouchstart=""放在每个链接中，而是将其放在<body>标记中，它将更可靠地工作。因此，您的body标签应该看起来像这样<body ontouchstart="">，并且您的链接看起来像这样
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2：我发现，与其复制CSS并在桌面上使用屏幕尺寸查询，还需要在body标记中添加`onmouseover =“”，因此：active伪类将被调用在桌面上使用鼠标，在移动设备上进行触摸。如果执行此操作，则可以忽略有关媒体查询的麻烦。
如果您不想修改HTML代码，则可以尝试以下操作：
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>