jQuery:現在カーソルがhoverしている要素を返す

goto_jp 6,115views 更新:2015年6月9日

下記で取得できる。

jQuery(":hover")

カーソルがhoverしている箇所に重なっている全要素が深い順に配列で返される。

応用:特定のレイヤーの上にカーソルが存在することを判定する

$(".layer").mouseout(function() {
    //「layer」から外れた時の処理
});

このコードの場合、クラス layer からマウスが外れると実行される書き方だが、下記のようなHTMLの場合 layer の上にある input や button といった他の要素にカーソルを乗せた時も layer から外れたと判定されてしまう。

<div class="layer">
  <input type="text">
  <button>送信</button>
</div>

そのため、mouseout() だけでは対応できない。

そこで下記のようにする。

$(".layer").mouseout(function () {
    var flag = false; //判定用フラグ準備
    jQuery(":hover").each(function () { //カーソル位置の全要素を走査
        if ($(this).attr("class").indexOf("layer") >= 0) { //走査中要素のクラス名に「layer」があるか
            flag = true; //「layer」があればtrue
        }
    });
    if (!flag) { //flagがtrueでなければ「layer」から外れている
        //「layer」から外れた時の処理
    });
});

マウスカーソルがある場所で重なっている要素すべてのクラス名をチェックし、いずれかの層に layer を確認できれば layer の上にカーソルが存在していると判定する。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません