README

这个库检测浏览器是否支持mouseover事件。

长期以来一直认为所有浏览器都会有mouseover事件，但随着不久前移动设备和触摸屏电脑的引入，这种假设导致了不希望的行为。

您可能会遇到以下问题

移动设备
- 当为链接添加:hover样式时，这会在移动设备上导致第一次触摸（点击）不会触发期望的动作，而是激活链接的hover状态，需要第二次点击才能得到期望的点击行为，通过从链接中移除CSS样式:hover可以解决这个问题，因此第一次点击将产生真实的点击行为。
仅从移动设备中移除:hover
- 有一些库试图检测浏览器是否使用移动设备，无论是通过测量浏览器宽度还是通过在JavaScript中检查navigator.userAgent值，但问题是，这种方法不会与现有的已知移动设备一起工作，而且一旦推广了新的浏览器或移动设备，这种方法就不会再有效，此外，这也没有考虑到您可能会使用通过蓝牙连接的鼠标，在这种情况下，您将触发mouseover事件。
依赖于宽度
- 与上述方法类似，这没有考虑到您实际上可以调整桌面浏览器的宽度，也没有办法预测所有移动设备的宽度。

解决方案

我们使用的方法是实际检测mouseover事件，一旦用户移动鼠标，class has-mouseover将被添加到html标签。

现在，您不需要像这样添加到链接的样式

a:hover{
  text-decoration: underline;
}

而是这样做

html.has-mouseover a:hover{
  text-decoration: underline;
}

使用这种方法，您可以覆盖以下情况

如果用户有移动设备，mouseover不会触发，因此a:hover规则不会存在，第一次点击链接将触发期望的行为。
如果用户将鼠标连接到桌面电脑、平板电脑、移动设备或任何类型的设备，一旦鼠标在网站上移动，就会添加has-mouseover类，因此所有:hover或以html.has-mouseover为前缀的规则都将存在。

composer require cristian100/mouseover_detect

一旦此库加载，您将在html标签中看到has-mouseover类，从这里您可以根据这个类创建:hover样式，这样它只会在检测到mouseover时才工作。