css nearhover解决方案

Question

在创建我的web应用程序时，我想要对某个元素进行悬停操作。我注意到，当你靠近元素时（而不是第二个你越过边界）有悬停触发器会很好。首先它让我想到hoverintent但是只检查你的鼠标移动是否真的有意悬停元素（即稍微等待鼠标减慢速度）。

经过一番搜索，我找到了2个解决方案，后者让我想到了第3个。

第一个在我看来是最不优雅的：
创建一个mousemove事件获取鼠标位置并检测邻域中的元素并触发其悬停操作。

第二：
在要悬挂的元素中创建一个不可见的元素，该元素更大（也是更低的z-index），从而使其触发主元素的悬停，同时仍然在物理外部但“接近”元素。

第三：
这几乎与2相同，但使用：after（或：before）psuedoelement。

element:after{
    position:absolute;
    content: '';
    height: 120%;
    width: 120%;
    top:-10%;
    left:-10%;
}

编辑：
as mentioned by lollero
solution 4 :(＆lt; -lollero的jsfiddle链接）
元素可以获得填充，然后等效负边距。

img { padding: 20px; margin: -20px; }

也可能是：

.element { padding: 0px 20px 0px 20px; margin: 0px -20px 0px -20px; }

您对3（现在4）解决方案有什么看法，您可能有其他解决方案吗？

我的目标是可以在尽可能少地影响周围环境的情况下实现。

jsfiddle demo simple version of what i want to achieve按钮只是元素的控件。

Answer 1

所以，仍然不是很清楚大局是什么......如果我理解正确，你可以这样做。

http://jsfiddle.net/lollero/t857Y/

同样的事情，但我给了img z-index值。 http://jsfiddle.net/lollero/t857Y/1/

本质上，元素有一个填充，然后是等效的负边距。

img { padding: 20px; margin: -20px; }

也可能是：

.element { padding: 0px 20px 0px 20px; margin: 0px -20px 0px -20px; }

---

如果你不介意它推开它周围的其他元素..然后只添加填充。

Answer 2

我会用边框做{：3}}

a {
  position: relative;
  border: 20px solid transparent;
  margin: -20px;
  z-index: 1;
}

因此，您仍然可以使用填充来为元素设置一点样式。您必须使用position relative并为元素指定z索引，以使其适用于内联内容。

但我不建议这样做。它不是用户期望的行为。它可能会让用户感到奇怪甚至错误......

对于iPad来说这是一个好主意。有时内联的链接有点难以点击，通过这个技巧可以轻松触摸它。