3

単純な JavaScript または jQuery を使用して、要素の下部マージンでマウスオーバーを検出することは可能ですか?

これは、Mediumエディターが、マウスが段落要素の下余白の上にあるときにリンク (「プラス」記号) を表示できるが、マウスが段落テキストの上にあるときでは表示できないため、可能であると思われます。彼らがどうやってそれを達成したのか私にはわかりません。Medium での動作は次のとおりです: http://d.pr/i/njS+

編集:中はネストされた要素を使用しません。それは、下の余白を持つ単純な要素です。こちらをご覧ください: http://d.pr/i/X7Gb+

特定の理由で、ネストされた要素を使用できず、プレーンな要素とその余白の下部だけを使用して、Medium のようにしたいと考えています。

4

2 に答える 2

2

できません。マージンは要素の一部ではありません。ただし、ネストされた 2 つの DIV を使用できます。次に、マウスが外側の DIV の上にあるが、内側の DIV の上にないかどうかを検出します。それがメディアエディターのやり方だと確信しています（確認できませんが）。

たとえば、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 に答える