如何使链接、按钮和 div 悬停在移动设备上？答案

【问题标题】：How to make links, buttons, and divs hover on mobile?如何使链接、按钮和 div 悬停在移动设备上？
【发布时间】：2018-02-13 22:34:49
【问题描述】：

我无法让元素悬停在移动设备上。

在我的 CSS 中，我输入如下内容：

.button:hover {
   background-color: #fff;
}

这似乎在我的桌面上很好地悬停，但是在我的 iPhone 和其他触摸设备上，我似乎无法让按钮悬停。

【问题讨论】：

移动设备没有:hover
由于没有鼠标光标，您无法将按钮悬停在移动设备上。但是，您可以正确使用 .activate 来设置背景颜色，如下所示：.button:activate{...}
见stackoverflow.com/questions/2427447/…
你可以试试:active 或:focus
Does css hover work on mobile devices?的可能重复

标签： html css hover touch

【解决方案1】：

移动设备上没有hover 事件，您可以定义悬停行为，它将在桌面设备上运行。但在移动设备上，您只能通过点击/触摸看到此悬停。

【讨论】：

【解决方案2】：

悬停意味着另一回事。在这种情况下，鼠标光标悬停在 HTML 按钮或您使用的任何元素上。

在手机的情况下，没有鼠标光标。它总是一个点击。在大多数情况下，悬停只会在点击或触摸时显示。如果你真的需要这个，你可以试试 Javascrit onclick() 或其他功能，所以当他们点击或触摸时，你可以添加一些东西。

【讨论】：

我在我的 5.5 英寸 android 7 chrome 浏览器上检查了两个链接，它们的行为都一样。单击后背景会发生变化。当我按住点击时，背景不会改变。我能给出的最好的理由和解释是设备和浏览器对这些事情的反应都不同。虽然有些人可能会尽可能多地尝试复制体验，但其他人只是知道这两种设备不相同并将它们分开。所以我的建议是专注于通用功能而不是少数。悬停只是不那样工作。就像我说的那样，你将不得不使用 javascript 来玩这个把戏。
您可以从该站点运行一些测试，它会为您模拟多个实例 [link] (mobilephoneemulator.com)

【解决方案3】：

为了使用 jQuery/CSS 快速解决这个问题，我做了以下操作。

像这样为我的元素编写样式：

.one-block:hover, .one-block.hover { ... }

定位：
```
.one-block { position: relative; }
```

在这个块中添加了最后一个元素 -> .mobile-mask:

<div class="one-block">
    ....
    <div class="mobile-mask"></div>
</div>

定位.mobile-mask:

.mobile-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

为非移动设备隐藏它（这部分根本不精确：仅使用 css。如果您通过其他方式检测移动设备，例如，给 body 一个类，那么它会更精确。在这种情况我只需要一个快速的解决方案）：
```
@media (min-width: 681px) {
  .mobile-mask {
    display: none;
  }
}
```

创建将添加/删除 .hover 类的 javascript：

$('.mobile-mask').on('click', function(){
  $('.list .mobile-mask').show();
  $('.list .one-block').removeClass('hover');
  $(this).hide();
  $(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
  var windowWidth = $(this).width();
  if(windowWidth > 680){
    $('.list .one-block').removeClass('hover');
  }
});

【讨论】：