web-dev-qa-db-ja.com

jQueryを使用してマウスオーバーで現在の要素を見つけるにはどうすればよいですか？

マウスオーバー中の現在の要素のクラス名を取得するにはどうすればよいですか？例えば enter image description here

マウスがdivからaに移動したときに、div要素のクラス名を取得したい。 jQueryを使用して取得するにはどうすればよいですか？

javascriptjqueryhtmlmouseovermouseout
22
midstack

これは私のバージョンです：

function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
   alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);

作業フィドル： http://jsfiddle.net/roXon/dJgf4/

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {
       alert('The mouse was over'+ elId );
    }
}
$(".el").mouseleave(handler);
.el{
    width:200px;
    height:200px;
    margin:1px;
    position:relative;
    background:#ccc;   
    float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover an element and refresh the page, than move your mouse away.</p>
<div id="element1" class="el"></div>
<div id="element2" class="el"></div>
<div id="element3" class="el"></div>
<div id="element4" class="el"></div>
<div id="element5" class="el"></div>
<div id="element6" class="el"></div>
<div id="element7" class="el"></div>
<div id="element8" class="el"></div>
<div id="element9" class="el"></div>
23
Hackerman

あなたはこれを試してみることができます：

window.onmouseover=function(e) {
        console.log(e.target.className);
};
24
Adesh Pandey

Mouseoverイベントが発生するdivのクラス名が必要ですか？その場合は、これを参照してください、

[〜＃〜] html [〜＃〜]

<div class="a">aaaaaaaa</div>
<div class="b">bbbbbbbbb</div>

jQuery

$(document).on('mouseover', 'div', function(e) {
    console.log($(e.target).attr('class'));
});

jsFiddle

ターゲットでmouseoverイベントを使用しました

e.targetは、そのイベントが発生する要素を提供します

Divのクラス名を取得したい場合は、「mouseover」のinstaedイベント「mouseleave」を使用します。

8
Snehal S

ほとんどの人が無視しているのは、OPからのこのリクエストです。

When mouse over div from a

特定のタイプの要素からホバリングしたことを知る必要があるという意味です。要素だけでなく

特定の要素のmouseleave（あなたの場合はa要素）でtrueに変更して、グローバル変数を作成しました。次に、ホバー関数内で、それが正しいことを確認する必要があります。

デモ

編集：aに直接ではなくdiv要素からホバリングするときのEdgeケースでフィドルデモを更新しました。

2
Omri Aharon

マウスオーバーで要素の位置を取得し、クラス名を取得します

<div id="wrapper">
<a href="#" class="anchorClass">A</a><div class="divClass">DIV</div>
</div>

$('#wrapper').mouseover(function(e) {
    var x = e.clientX, y = e.clientY,
        elementOnMouseOver = document.elementFromPoint(x, y);
        elementClass=$(elementOnMouseOver).attr('class');
    alert(elementClass);
});

JSFiddle： http://jsfiddle.net/ankur1990/kUyE7/

これをラッパーdivだけでなく、ウィンドウ/ドキュメント全体に適用したくない場合は、ラッパーをウィンドウ/ドキュメントに置き換えることができます

 $(window).mouseover(function(e){});
1
Ankur Aggarwal

これは動作するはずです：

スタイルシートでクラスを定義します：

.detectable-div{
    border: white solid 1px;
}

.detectable-div:hover{
    border: red solid 1px;
}

あなたのjsで：

$('div.detectable-div:hover').mouseover(function () {
    $(this) // this is your object
})
0
bto.rdz

すべてあなたがそれを望む方法に依存します。これもオプションです。

" フィドル1 "

より詳細に。これは、aからdivへの直接パスを取得した後にのみtrueと表示されます。 （aとdivの間の小さな空白。）

  • a-> div TRUE
  • a-> div-> white space in between-> div FALSE

" フィドル2 "

持ちこたえるかもしれません。これは、aとdivの間の小さな空白に移動し、divに戻る場合にもtrueと表示されます。次のように：

  • a-> div-> white space in between-> div TRUE


var mode = 0;
$(window).on("mousemove", function(e) {
    if (e.target.className === "d1") {
        mode = 1;   
    } else {
        var cc = e.target.className;
        if (cc !== "d2" && mode) {
            var el = $(".d1"),
                d1 = {
                    x : el.offset().left,
                    y : el.offset().top,
                    w : el.width(),
                    h : el.height()
                },
                c = {
                    x  : e.pageX,
                    y  : e.pageY
                };
            if (c.x >= d1.x + d1.w && c.y >= d1.y && c.y <= d1.y + d1.h)
                mode = 2;
            else
                mode = 0;
        } else if (cc === "d2" && mode) {
            mode = 3;
        }
    }
    $("#status").html("Current: " + (mode == 3 ? "OVER" : "NOT OVER") + " from a" );
});
0
user13500