使用CSS3触摸事件悬停效果

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

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

我想不使用JavaScript来做到这一点。如果有一个方法来做它与纯CSS3将是最好的选择。

解决方法

在css中使用：active伪类，然后向body标签添加ontouchstart =“”和onmouSEOver =“”。

以下代码摘自我的网站，其中我有按钮，变得更小，发光白色当悬浮(在pcs上)或按下(在触摸设备上)

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

以下修改不再相关，因为我已删除原始的，不正确的说明，但如果你在这里之前，仍可能是有帮助的

编辑：我发现它工作更可靠如果，而不是在每个链接，把onuchstart =“”放在< body>标签。所以你的body标签应该像这样< body ontouchstart =“”>您的链接看起来像这样

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

编辑2：我已经知道，而不是复制你的CSS和使用屏幕尺寸查询桌面，只是添加`onmouSEOver =“”到body标签，所以：active伪类将被桌面上的鼠标调用和通过移动触摸。你可以忽略关于媒体查询的漫游，如果你这样做。

原文链接：https://www.f2er.com/css/221456.html

使用CSS3触摸事件悬停效果

解决方法

猜你在找的CSS相关文章