hover情報を取得する。(jquery)

はじめに

今回初めてhoverの情報を元に条件分岐して
hoverが外れたのかを判断して機能を実装したのでここに残しておきます。

hoverの情報を取得することに関する記事がほとんどなく
「もしなかったら・・・」と思ったので
せっかくなので僕も書いてみようと思います。

【僕が救われた参考記事】
・jQuery：現在カーソルがhoverしている要素を返す
https://hacknote.jp/archives/11228/

では行きます。
上記の記事をほぼ参考にコードを書いたのですがあ
一部違うとことがあり、そこにも理由があるのでその辺も解説できたらなと思います。

hoverの情報を元に条件分岐

jqueryを初めてまもないのでとてもツッコミどこを満載かもしれませんが
何かあればアドバイスなど頂ければとても嬉しいです。

hoverのON,OFFには
.mouseenter()"と".mouseleave()"という書き方もあるようですが今回は動的に作られた
要素ではないのでhoverで書いていきます。

今回実装したのはこちらです。

hover.js

$("#category-btn").hover(function() {
     $("#parent_ul").show();
   // ボタンをcategory_btnをhoverしたらparent_ulが現れる。ここまでは通常営業ですね
 },function() {
     var judgement = foge;
    // これはhoverの情報を元に判断するための変数
     var hover_ids = [];
    //　↑下で使ってる$.inArrayを使うために必要
     jQuery(":hover").each(function () {
    // hover時の要素を引っ張ってくる
       hover_ids.push($(this).attr("id"));
            //$(this).attr("id")で要素からidを取得する
         if ($.inArray("parent_ul", hover_ids) == -1) {
          //$.inArrayの仕様で-1という記述がある
           judgement = "out";
         }
     });
     if (judgement == "out") {
        $("#parent_ul").hide();
      }
});

かなりごちゃごちゃしているので部分ごと分けて解説します

hover.js

jQuery(":hover")

このメソッドはhoverしている全要素が返されます。
ですので

hover.js

jQuery(":hover").each(function () {
   console.log($(this).attr("id"));
});

とやってやるとhoverしてる要素のidが出力されるます。

hover.js

$.inArray("配列の中身の要素名","配列名")

このメソッドは
配列の中身に指定の要素があったらその[index番号]を返し,
なければ[-1]を返します。

ですのでhoverした中にその要素があるかないかを判断してもらっています。
今回は外れた時の処理を書きたかったので
-1の時にoutとして処理を書いています。

もしかしたら他にも役に立つことがありのそうなメソッドだったので
今回qiitaに書きました。

最後まで読んでいただきありがとうございました。