javascript - 在元素附近激活悬停的方法

Question

我的页面上有很多元素，当它们悬停时会显示一个菜单。因为悬停需要位于元素上，如果您位于边框上，则激活它们会变得非常棘手，我想知道是否有一种方法可以在鼠标靠近元素时激活悬停菜单，比方说以容差率距离任意边界(N、S、E、W)10 个像素。

在页面上跟踪鼠标确实不是一个选项，客户端需要进行太多处理，并且页面已经加载了大量 JavaScript 代码。

Answer 1

我认为用 div/span 元素包装菜单项内容，然后应用悬停样式效果最好。然后正如 Sime 所说，增加菜单项上的填充。

例如 html 为:

<ul class="menu">
   <li><span>content here</span></li>
</ul>

那么 CSS 会是这样的:

li {
     padding:10px;
}

li:hover span {
      /* Hover style of menu item here */
}