gpt4 book ai didi

html - CSS :hover behaviour on touchscreen devices

转载 作者:搜寻专家 更新时间:2023-10-31 22:57:18 24 4
gpt4 key购买 nike

我正在开发一个 CSS 框架,该框架依赖于尽可能简单、最小和纯 CSS。我想要的是让某些东西像悬停时打开下拉菜单,但是我不确定如何在移动设备上仅使用 CSS 来实现它。

检查了this answer之前,我确认了我部分知道的事实:某些移动浏览器和设备在单击元素时将使用 :hover 伪类,这将允许我以我想要的方式打开下拉菜单。其他人说 :active 也可以。

我在一条规则中同时使用了 :focus 来覆盖尽可能多的环境和案例,但是我不确定这是否适用于许多设备。所以我的问题是:

  • 有什么方法可以确保基于悬停的下拉组件能够跨设备工作吗?
  • 是否有我可以使用的伪类或属性,它们可能特定于浏览器或类似的东西以确保涵盖大多数设备?
  • 是否有关于触摸屏、移动设备或移动浏览器行为以及它们如何处理悬停事件的文档?

最佳答案

这几乎是一堆问题的重复,但我想谈谈你的要点:

  1. “基于悬停的下拉菜单”是指只要用户将手指放在上面就会出现的下拉菜单吗?作为移动用户,我无法想象这是一个成功的用户体验

  2. 所有伪类都在这里https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes我认为“交互式”的是 :active:checked:focus:hover:hover 的问题是,正如您所说,它没有得到很好的支持,而且它并不真正适合用户与移动网站交互的方式。 :checked 的问题在于它依赖于复选框,这对支持的标记施加了相当严格的限制。

  3. 显然移动版 Safari 不支持它,这意味着它是一个足够大的问题。

最常见的解决方案是使用 javascript touchevents,但如果您要使用全 CSS,那将不适合您。

您可能会在这里找到有用的东西 Hover effects using CSS3 touch events或这里 :touch CSS pseudo-class or something similar?

关于html - CSS :hover behaviour on touchscreen devices,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39325682/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com