使用CSS3触摸事件悬停效果 | 使用CSS3触摸事件悬停效果

本文介绍了使用CSS3触摸事件悬停效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.

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

Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.

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

I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.

推荐答案

在css中使用：active 将 ontouchstart =和 onmouseover =添加到正文标签。

Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.

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

The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)

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

以下修改不再相关，因为我已删除原始的不正确的说明，

The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful

编辑：我发现它更可靠，如果，而不是把 ontouchstart =，将其放在< body> 标记中。所以你的body标签应该像这样< body ontouchstart => ，你的链接看起来像这样

I have discovered it works more reliable if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this

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

EDIT 2：我发现，并使用屏幕尺寸查询桌面，只需添加`onmouseover =到body标签，因此：active伪类将被鼠标在桌面上和通过移动触摸来调用。如果您这样做，您可以忽略有关媒体查询的赌博。

EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.

这篇关于使用CSS3触摸事件悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！