使用 CSS3 触摸事件的悬停效果
Posted
技术标签:
【中文标题】使用 CSS3 触摸事件的悬停效果【英文标题】：Hover effects using CSS3 touch events 【发布时间】：2012-01-09 23:04:19 【问题描述】：我正在使用 CSS3 悬停和过渡来显示和隐藏图像。在移动设备上，我想对触摸事件使用相同的转换。
基本上，第一次触摸将执行悬停效果或翻转，而触摸向上将执行滚动。
我想远离使用 javascript 来执行此操作。如果有办法用纯 CSS3 做到这一点，那将是最好的选择。
【问题讨论】：
您的问题实际上相当模糊；我不确定您是在问 如何 中的任何一个，还是可以单独在 CSS 中完成。如果您想了解有关如何在 javascript 中完成此操作的更多信息，请更新您的问题，我可以更新我的答案:) :active pseudo-class doesn't work in mobile safari的可能重复 【参考方案1】：在你的css中使用:active伪类，然后将ontouchstart=""和onmouseover=""添加到body标签中。
以下代码摘自我的网站，其中的按钮在悬停（在电脑上）或按住（在触摸设备上）时会变小并发出白色光
<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标签应该看起来像this<body ontouchstart="">并且你的链接看起来像这样
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
编辑 2： 我发现，与其复制您的 CSS 并使用桌面的屏幕尺寸查询，只需将 `onmouseover="" 添加到 body 标签中，因此 :active 伪类将由桌面上的鼠标和移动设备上的触摸调用。如果你这样做，你可以忽略关于媒体查询的漫无边际。
【讨论】：
这行得通。谢谢。但我很想解释 为什么 ontouchstart="" 和 onmouseover="" 达到预期的效果。对我来说当然不是不言而喻的。 好吧，我可能不是解释这一点的最佳人选，但我理解它的方式是：ontouchstart 和 onmouseover 是侦听器，它们等待相关元素被触摸或鼠标悬停（在这种情况下）然后将调用在引号内命名的 javascript 函数。在我们的例子中，我们将引号留空，因此没有执行任何脚本，但由于监听器在那里，Web 浏览器仍然认为它们处于活动状态。 :active 伪类应用于一个元素，如果它当前使用 javascript 是活动的。侦听器导致应用 :active 伪类。 希望对您有所帮助。我不是很会说话。 您能否发布一个指向 JSFiddle 的链接？我无法在我的代码中复制它。 @Lasha 有空我会放一张。【参考方案2】：如果你不想修改你的 html 代码，你可以试试这个：
<script>
document.body.addEventListener('touchstart',function(),false);
</script>
【讨论】：
@matthewpavkov 它可以工作，但它应该是 addEventListener 而不是 addEventlistener。【参考方案3】：如果有人在 2020 年及以后仍然遇到此问题，article 帮助了我。
我的问题是:hover 效果在 Safari 浏览器中的 iPhone 上不起作用。我无法真正使用在其他答案和资源中找到的 JS 解决方案，因为我想附加 :hover 的元素是在从第 3 方 API 获取数据时动态创建的。只需将 ontouchmove 添加到根 HTML 元素并将 :hover 添加到 CSS 文件夹中的适当元素即可修复它。 （对不起我的英语，我不是母语：p）
【讨论】：
以上是关于使用 CSS3 触摸事件的悬停效果的主要内容，如果未能解决你的问题，请参考以下文章