javascript - 检测元素底部边距上的鼠标悬停

Question

是否可以使用纯 JavaScript 或 jQuery 检测元素底部边距上的鼠标悬停，即鼠标悬停在元素边距上但不在元素包含自身上时？

这似乎是可能的，因为 Medium当鼠标悬停在段落元素的底部边缘时，编辑器可以显示链接(“加号”)，但当鼠标悬停在段落文本上时则不会。我不知道他们是如何做到这一点的。这是它在 Medium 中的工作方式:http://d.pr/i/njS+

编辑:Medium 不使用嵌套元素，它只是带有底部边距的普通元素。看这里:http://d.pr/i/X7Gb+

出于特定原因，我不能使用嵌套元素，并且想像 Medium 那样使用普通元素及其底部边距。

Answer 1

你不能，边距不是元素的一部分。但是您可以使用 2 个嵌套的 DIV。然后检测鼠标是否在外层DIV上但没有在内层DIV上。我确信 Medium 编辑器就是这样做的(尽管我无法检查)。

例如使用 jQuery 检查:

$('#outer').is(":hover") && !$('#inner').is(":hover")

更新:在来自 Medium 的示例图像中，外部 DIV 将是 #editor_4，而不是内部 DIV，还有其他元素，但原理是(或可能是)相同的。

对于很多行，在每行的鼠标悬停事件中设置/清除 bool 标志可能比每次都选择和测试每个元素更有效。

更新2:我创建了一个 jsFiddle它使用单个 bool 标志实现这一点。