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

下記で取得できる。

jQuery(":hover")

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

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

すぐ思いつくのは下記のような例。

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

このコードの場合、クラス layer からマウスが外れると実行されるので一見正しく思える。 しかし下記のように layer 以下の入れ子構造の場合 layer の上にある content や input、button などの子要素にカーソルを乗せた時も layer から外れたと判定されてしまう。

<div class="layer">
  <div class="content">
    <p>...
    <input type="text">
    <button>送信</button>
  </div>
</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 の上にカーソルが存在していると判定する。