Javascript 在元素底部边距上检测鼠标悬停

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

这似乎是可能的，因为当鼠标位于段落元素的底部边距上时，编辑器可以显示链接（“加号”），但当鼠标位于段落文本上时，则无法显示链接。我不知道他们是怎么做到的。以下是它在介质中的工作原理：

编辑： Medium不使用嵌套元素，它只是带有底边的普通元素。请看这里：

---

由于一个特殊的原因，我不能使用嵌套的元素，我想使用中间元素，只使用普通元素及其边距底部。

你不能，边距不是元素的一部分。但是可以使用2个嵌套div。然后检测鼠标是否在外部DIV上，而不是在内部DIV上。我确信媒体编辑器就是这样做的（尽管我无法检查）

e、 g.使用jQuery进行检查：

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

更新： 在来自媒体的示例图像中，外部DIV将是

#editor_4

，而不是内部DIV，还有其他元素，但原理是（或可能是）相同的

对于许多行，在mouseover事件中为每一行设置/清除boolen标志可能更有效，而不是每次都选择和测试每个元素

更新2：

---

我创建了一个使用单个布尔标志来实现这一点的函数。

可以找到光标是否位于元素的边距底部，但这有点棘手。我们需要找到元素的位置、高度和宽度，并在文档上绑定

mousemove

事件

HTML

<div id="margin">Margin</div>

还有神奇的JAVASCRIPT

 var x, y,
        mar = {}; 
        mar.elm = $('#margin');
        mar.width = mar.elm.width();
        mar.height = mar.elm.height();
        mar.left = mar.elm.offset().left;
        mar.top = mar.elm.offset().top;
        mar.marginBottom = parseInt(mar.elm.css('margin-bottom'), 10);

  $(document).on('mousemove', function(e) {
        x = e.offsetX;
        y = e.offsetY;

        if (x >= mar.left &&
            x <= (mar.width + mar.left) &&
            y >= (mar.top + mar.height) &&
            y <= (mar.top + mar.height + mar.marginBottom)) 
        {
            mar.elm.removeClass('active').addClass('active');
        } else {
            mar.elm.removeClass('active');
        }
  });

var x，y，
mar={}；
三月埃尔姆=$（'保证金'）；
mar.width=mar.elm.width（）；
三月高度=三月榆树高度（）；
mar.left=mar.elm.offset（）.left；
mar.top=mar.elm.offset（）.top；
mar.marginBottom=parseInt（mar.elm.css（'margin-bottom'），10）；
$（文档）.on（'mousemove'，函数（e）{
x=e.offsetX；
y=e.offsetY；
如果（x>=三月左&&
x=（三月顶+三月高）&&
y你确定它真的是边距而不是元素周围的容器DIV吗？是的，它似乎是边距，元素周围没有容器DIV，我刚刚编辑了这个问题，屏幕截图显示了更多细节。谢谢herman，但Medium没有使用嵌套DIV，它只是带有底部边距的普通元素。我刚刚编辑过问题是媒体的屏幕截图证明了这一点。我很惊讶他们没有嵌套元素也能达到这种效果。你能邀请我合作以便我调查吗？我用Twitter登录，但不能发布。我只是看了一下图片。他们可能在测试鼠标是否在
#editor_4
上，但是通过这些
或
元素中的任何一个进行编辑。谢谢herman，我刚刚通过您的网站联系人表单向媒体发送了一个协作链接。您应该能够使用它在媒体上创建帖子。您可以添加注释吗？然后，一旦我保存了帖子，您应该能够在媒体上创建帖子（我现在要下线了，几个小时后就会回来）。这把小提琴考虑了多个元素，还有左、右边距…用注释过的代码，你也可以算出最高边距。。。
 var x, y,
        mar = {}; 
        mar.elm = $('#margin');
        mar.width = mar.elm.width();
        mar.height = mar.elm.height();
        mar.left = mar.elm.offset().left;
        mar.top = mar.elm.offset().top;
        mar.marginBottom = parseInt(mar.elm.css('margin-bottom'), 10);

  $(document).on('mousemove', function(e) {
        x = e.offsetX;
        y = e.offsetY;

        if (x >= mar.left &&
            x <= (mar.width + mar.left) &&
            y >= (mar.top + mar.height) &&
            y <= (mar.top + mar.height + mar.marginBottom)) 
        {
            mar.elm.removeClass('active').addClass('active');
        } else {
            mar.elm.removeClass('active');
        }
  });