Question

通常情况下，我需要在悬停时显示菜单，而移动设备菜单应在点击时打开。现在例如请考虑以下示例：

＆＃13;

.btn {
  width: 200px;
  background-color: #333;
  color: white;
  padding: 10px;
}
.menu {
  display: none;
  padding: 15px;
}
.btn:hover .menu {
  display: block;
}
.btn:focus .menu {
  display: block;
}

＆＃13;

<div class="btn">
  Button
  <div class="menu">I am menu</div>
</div>

＆＃13;

现在这可以在移动设备上自动运行，因为悬停状态在触摸设备上很粘。但这种黑客攻击适用于所有触控设备吗？也就是说，风险值得吗？是否会有一些触摸设备没有悬停状态粘性？显然，替代方案是在触摸设备上使用JavaScript分配触摸/点击事件，但这似乎是多余的，因为我还没有看到任何没有粘滞状态的触摸设备？

所以我的问题是：

使用悬停状态hack是否可以，或者我应该使用JavaScript事件来使其更具防弹性？

Answer 1

我认为只要你对菜单或者用户点击单独元素时的任何结束都没关系，只需坚持使用大多数徘徊的CSS即可。

我不知道任何不遵守此行为的移动浏览器，至少不是主要的。如果任何主流浏览器放弃了这一点，那么移动网络的很大一部分都需要重建。

可能安全！

Answer 2

根据我的经验，这不是一个真正的黑客攻击，但更多的是用纯CSS模仿悬停事件的方法。我主要使用:hover/:focus来解决这类问题，因为

1。）他们可靠。

2。）便宜（以kb计）。

只需要2个规则，没有外部HTTP请求就可以包含一个完整功能菜单的规则，但需要使用几行JavaScript（或者，恐怖，jQuery）来创建相同的东西。

我在评论中说过，您应该或可以强制使用tabindex属性来强制元素具有焦点，例如：

<div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div>

<div class="focusable-hover-element" tabindex="1">I can be focussed<div>

Answer 3

根据我的经验，这无法正常运行。它可能在另一个时间出现。但这不适用于2020年的当前浏览器。

更好的方法是将媒体查询用于粗略类型的指针：

@media(hover: none) and (pointer: coarse){
... CSS styling in here ...
}

Medium article on targeting touch devices

这适用于除IE MDN details以外的所有浏览器

CSS：悬停/：（移动）触摸设备上的焦点与点击事件

3 个答案: