Question

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

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

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

这似乎在我的桌面上徘徊，但是在我的iPhone和其他触控设备上，我似乎无法使按钮悬停。

Answer 1

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

Answer 2

Hovers在另一方面意味着一件事。在这种情况下，鼠标光标位于HTML按钮或您使用的任何元素上。

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

Answer 3

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

为我的元素编写样式：

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

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

添加了此块中的最后一个元素 - ＆gt; .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。如果您通过其他方式检测移动设备，例如，将一个类提供给正文，而不是更多在这种情况下，我只需要一个快速的解决方案）：
```
@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');
  }
});

如何在移动设备上悬停链接，按钮和div？

3 个答案: