Question

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

这似乎是可能的，因为Medium编辑器可以在鼠标位于段落元素的下边距上时显示链接（“加号”符号），但是当鼠标位于段落文本上时则不会。我不知道他们是如何实现这一目标的。以下是它在Medium中的工作原理：http://d.pr/i/njS+

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

由于某个特定原因，我不能使用嵌套元素，并且想要像Medium一样，只需要使用plain元素及其边距底部。

Answer 1

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

e.g。使用jQuery检查：

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

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

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

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

Answer 2

可以找到光标是否在元素的边缘底部，但它有点棘手。我们需要找到元素的位置，高度和宽度，并在文档上绑定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

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

2 个答案: