CSS 使用 CSS3 触摸事件的悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8330559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hover effects using CSS3 touch events
提问by mattwallace
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.
我正在使用 CSS3 悬停和过渡来显示和隐藏图像。在移动设备上，我想对触摸事件使用相同的转换。
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
基本上，第一次触摸将执行悬停效果或翻转，而触摸将执行滚动。
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.
我想远离使用 JavaScript 来做到这一点。如果有一种方法可以用纯 CSS3 做到这一点，那将是最好的选择。
回答by Chuck Dries
Use the :activepseudo-class in your css, then add ontouchstart=""and onmouseover=""to the body tag.
:active在 css 中使用伪类，然后将ontouchstart=""和添加onmouseover=""到 body 标记。
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)
以下代码摘自我的网站，其中的按钮在悬停（在 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>
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
以下编辑不再相关，因为我已经删除了原始的、不正确的说明，但如果您之前在这里，这些可能仍然有帮助
EDIT:I have discovered it works more reliably 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
编辑：我发现如果不是放在ontouchstart=""每个链接中，而是将它放在<body>标签中，它会更可靠地工作。所以你的 body 标签应该是这样的<body ontouchstart="">，你的链接应该是这样的
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
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.
编辑 2：我发现，与其复制 CSS 并使用桌面屏幕尺寸查询，只需将 `onmouseover="" 添加到 body 标记中，这样 :active 伪类将被桌面上的鼠标调用并且通过在手机上触摸。如果你这样做，你可以忽略关于媒体查询的漫无边际。
回答by RyanBay
If you don't want to modify your HTML code, you could try this:
如果你不想修改你的 HTML 代码，你可以试试这个：
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
回答by uchpochmak
If anyone is still having this issue in 2020 and beyond this articlehelped me.
如果有人在 2020 年及以后仍然遇到这个问题，这篇文章对我有帮助。
My issue was that :hovereffect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hoverto were created dynamically on fetching data from a 3rd party API. Just adding ontouchmoveto the root HTML element and :hoverto the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)
我的问题是:hover效果在 Safari 浏览器中的 iPhone 上不起作用。我无法真正使用我在其他答案和资源中找到的 JS 解决方案，因为我想要附加的元素:hover是在从 3rd 方 API 获取数据时动态创建的。只需添加ontouchmove到根 HTML 元素和:hoverCSS 文件夹中的适当元素即可修复它。（对不起，我的英语不是母语：p）
