Question

我正在使用CSS3悬停和过渡来显示和隐藏图像。在移动设备上，我想对触摸事件使用相同的过渡。

基本上，第一次触摸会执行悬停效果或翻转，并且触摸将执行滚动。

我想远离使用JavaScript来执行此操作。如果有办法用纯CSS3做这将是最好的选择。

Answer 1

在您的css中使用:active伪类，然后将ontouchstart=""和onmouseover=""添加到正文标记。

以下代码摘自我的网站，其中我的按钮变小，在悬停（在电脑上）或按下（在触摸设备上）时发出白光

<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>

以下编辑不再相关，因为我删除了原始的错误说明，但如果您在此之前可能仍然有帮助

编辑：我发现如果将ontouchstart=""放在每个链接中，而不是将其放在<body>标记中，它的工作效率会更高。因此，您的正文标记应该如下<body ontouchstart="">，您的链接看起来像这样

<a href="#teamdiv">
    <div class="boxbutton" id="teambb">
    <h5>Team</h5>
  </div></a>

编辑2：我已经想到，不是复制CSS并使用桌面的屏幕尺寸查询，只需将“onmouseover =”“添加到body标签中，所以：active伪类将通过桌面上的鼠标和移动设备上的触摸来调用。如果你这样做，你可以忽略媒体查询的漫无目的。

Answer 2

如果您不想修改HTML代码，可以试试这个：

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>

Answer 3

如果有人在2020年仍然有这个问题，那么article可以帮助我。

我的问题是:hover效果在Safari浏览器中的iPhone上不起作用。我真的不能使用在其他答案和资源上找到的JS解决方案，因为我要附加:hover的元素是在从第三方API获取数据时动态创建的。只需将ontouchmove添加到根HTML元素并将:hover添加到CSS文件夹中的相应元素即可对其进行修复。（对不起我的英语，我不是母语人士：p）

使用CSS3触摸事件悬停效果

3 个答案: