「is(‘:hover’)」がMozilla FirefoxとMicrosoft Edgeでは効かない話

JavaScriptの話

2017.03.21

キレそうです。
Google Chromeではもちろん動く、Internet Explorerでも問題なし、ところがMozilla FirefoxとMicrosoft Edgeは言うこと聞かないじゃないですかーーー！やだーーーーー！

ということで表題の件です。
何が動かないってjQueryで条件分岐として「is(‘:hover’)」を記述したのですが、結果としてtrueしか返してくれないのです。それもFirefoxとEdgeだけ。対処法を忘備録として残しておきます。多分2つあると思います。

問題のコードは下記の通りです。

$(function(){
  if( $(hoge).is(':hover') ) {
    // 何らかの処理
  }
});

$(function(){

if( $(hoge).is(':hover') ) {

// 何らかの処理

}

});

条件分岐させない

「hover()」メソッドを使ってみましょう。

$(function(){
  $(hoge).hover(function(){
    // ホバーされている間の何らかの処理
  }, function(){
    // ホバーが外れた時の何らかの処理
  });
});

$(function(){

$(hoge).hover(function(){

// ホバーされている間の何らかの処理

}, function(){

// ホバーが外れた時の何らかの処理

});

代替ファンクションを作る

いやいやでもどうしても条件分岐させたい！そんなときは「is(‘:hover’)」に代わるものを作っちゃいましょう。
こちらのサイトを参考にしました。
http://stackoverflow.com/questions/8010267/jquery-condition-check-ishover-not-working

ベストアンサーの方のコード部分を転記します。

function idIsHovered(id){
    return $("#" + id + ":hover").length > 0;
}

function idIsHovered(id){

return $("#" + id + ":hover").length > 0;

}

idIsHovered(‘hoge’)と記述することで、「hoge」というid名で「:hover」状態にあるものの数を数えて1だったら「true」を返す、ということらしいです！（多分）

これをちょっとだけ変えちゃいましたが、前述の問題コード直すと以下の通りです。

function idIsHovered(element){
  return $( element + ":hover").length > 0;
}
$(function(){
  if(idIsHovered(hoge)) {
    // 何らかの処理
  }
});

function idIsHovered(element){

return $( element + ":hover").length > 0;

}

$(function(){

if(idIsHovered(hoge)) {

// 何らかの処理

}

});

最後に

調べていくうちに英語サイトにたどり着いてしまい、英語力中学生以下の私はめげそうになりました。でもコードだけよーく見てみると何をいいたいのかなんとなく分かっちゃったりして、やはりコードは世界共通なのだなあ、などと感心していました（笑）
それから、いつでもゴールまでの道筋は複数あるものだな、なんて思ったり。頭を柔らかくしていたいものです！