3

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

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

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

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

4

2 回答 2

2

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

例如使用 jQuery 检查：

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

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

对于多行，在每一行的鼠标悬停事件中设置/清除布尔标志可能会更有效，而不是每次都选择和测试每个元素。

Update2：我创建了一个jsFiddle，它使用单个布尔标志来实现它。

于 2013-09-17T22:17:20.497 回答
0

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

HTML

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

CSS

div {
    margin: 50px;
    border: 1px solid black;
}

div.active {
    background: red;
    color: blue;
}

还有神奇的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');
        }
  });

这是一个完整的例子：jsFiddle

于 2013-09-18T02:44:56.663 回答