Detect mouseover on element bottom margin

Question

Is it possible with plain JavaScript or jQuery to detect a mouseover on an element bottom margin, ie when the mouse is over the element margin but not on the element contain itself?

It seems it's possible because the Medium editor can display a link (a "plus" sign) when the mouse is over the bottom margin of paragraph elements, but not when the mouse is over the paragraph text. I have no idea how they achieve that. Here is how it works in Medium: http://d.pr/i/njS+

EDIT: Medium don't use nested elements, it is just the plain element with its bottom margin. See here: http://d.pr/i/X7Gb+

For a specific reason I can't use nested elements, and would like to do like Medium, just with the plain element and its margin bottom.

Answer 1

You can't, the margin isn't part of the element. But you can use 2 nested DIVs. Then detect whether the mouse is over the outer DIV but not over the inner DIV. I'm sure that's how the Medium editor does it (although I can't check).

e.g. check using jQuery:

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

Update: In the example image from Medium, the outer DIV would be #editor_4 and instead of the inner DIV, there are other elements, but the principle is (or could be) the same.

With many lines, it may be more efficient to set/clear boolen flags in mouseover events for each of the lines instead of selecting and testing each element every time.

Update2: I created a jsFiddle that implements this using a single boolean flag.