マウスオーバー中の現在の要素のクラス名を取得するにはどうすればよいですか?例えば
マウスがdivからaに移動したときに、div要素のクラス名を取得したい。 jQueryを使用して取得するにはどうすればよいですか?
これは私のバージョンです:
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);
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>
あなたはこれを試してみることができます:
window.onmouseover=function(e) {
console.log(e.target.className);
};
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'));
});
ターゲットでmouseoverイベントを使用しました
e.targetは、そのイベントが発生する要素を提供します
Divのクラス名を取得したい場合は、「mouseover」のinstaedイベント「mouseleave」を使用します。
ほとんどの人が無視しているのは、OPからのこのリクエストです。
When mouse over div from a
特定のタイプの要素からホバリングしたことを知る必要があるという意味です。要素だけでなく
特定の要素のmouseleave
(あなたの場合はa
要素)でtrueに変更して、グローバル変数を作成しました。次に、ホバー関数内で、それが正しいことを確認する必要があります。
編集:a
に直接ではなくdiv
要素からホバリングするときのEdgeケースでフィドルデモを更新しました。
マウスオーバーで要素の位置を取得し、クラス名を取得します
<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){});
これは動作するはずです:
スタイルシートでクラスを定義します:
.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
})
すべてあなたがそれを望む方法に依存します。これもオプションです。
より詳細に。これは、a
からdiv
への直接パスを取得した後にのみtrueと表示されます。 (a
とdiv
の間の小さな空白。)
a
-> div
TRUEa
-> div
-> white space in between
-> div
FALSE持ちこたえるかもしれません。これは、a
とdiv
の間の小さな空白に移動し、div
に戻る場合にもtrueと表示されます。次のように:
a
-> div
-> white space in between
-> div
TRUEvar 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" );
});