使用 CSS3 触摸事件的悬停效果答案

【问题标题】：Hover effects using CSS3 touch events使用 CSS3 触摸事件的悬停效果
【发布时间】：2012-01-09 23:04:19
【问题描述】：

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

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

我想远离使用 JavaScript 来执行此操作。如果有办法用纯 CSS3 做到这一点，那将是最好的选择。

【问题讨论】：

您的问题实际上相当模糊；我不确定您是在问如何中的任何一个，还是可以单独在 CSS 中完成。如果您想了解有关如何在 javascript 中完成此操作的更多信息，请更新您的问题，我可以更新我的答案:)
:active pseudo-class doesn't work in mobile safari的可能重复

标签： mobile css css-transitions

【解决方案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）

【讨论】：