使用CSS3触摸事件悬停效果

Question

使用CSS3触摸事件悬停效果

mat*_*ace 39 css mobile css3 css-transitions

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

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

我想远离使用JavaScript来做到这一点.如果有办法用纯CSS3做这将是最好的选择.

Answer 1

Chu*_*ies 70

使用:active伪类在你的CSS,然后添加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>

Run Code Online (Sandbox Code Playgroud)

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

编辑:我发现它更可靠,如果,而不是把ontouchstart=""每个链接放在<body>标签中.所以你的身体标签应该是这样的<body ontouchstart="">,你的链接看起来像这样

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

Run Code Online (Sandbox Code Playgroud)

编辑2:我已经发现,不是复制你的CSS并使用桌面的屏幕大小查询,只需将"onmouseover =""添加到body标签中,所以:active伪类将由桌面上的鼠标调用并通过移动触摸.如果你这样做,你可以忽略媒体查询的漫无边际.

好吧,我可能不是解释这个问题的最佳人选,但我理解的方式是这样的:ontouchstart和onmouseover是听众,他们等待有问题的元素被触摸或被篡改(在这种情况下)然后会调用在引号内命名的javascript函数.在我们的例子中,我们将引号留空,因此没有执行脚本,但由于侦听器在那里,因此Web浏览器仍将其视为活动状态.:如果某个元素当前在javascript中处于活动状态,则它将应用于该元素.侦听器将导致:active伪类被应用. (8认同)

Answer 2

小智 6

如果您不想修改HTML代码,可以试试这个:

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

Run Code Online (Sandbox Code Playgroud)

@matthewpavkov可以，但是应该是addEventListener而不是addEventlistener。 (2认同)

归档时间：	13 年，10 月前
查看次数：	57523 次
最近记录：	5 年，11 月前