jQueryのisメソッドのセレクタ指定でhover擬似クラスを使う

jQuery

2014.12.09

jQueryにはhover擬似クラスは対応してないはずなので、isメソッドでも使えないだろうと思って使ってみたら、使えました。

あれ？でも前にやった時には使えなかったような・・・、と思ってjQueryのバージョンをいろいろ変えてみて試してみると、1.4.3からis(‘:hover’)という指定ができるようになったようです。1.4.2以前だと、『Syntax error, unrecognized expression: hover』というエラーが表示されました。結構前からできたんですね。ただ、調べても1.4.3からできるようになったと書かれてるサイトがないのですが。

例えば、下記のように、setIntervalを用いて3秒ごとにあるブロック要素が左右に動くという指定をし、さらに当該要素にマウスが乗っている場合は動かないようにする場合は、『if(!($moveDiv.is(‘:hover’)))』で動かなくなります。

var $moveDiv = $('#moveDiv');
var left = parseInt($moveDiv.css('left')); //最初は0
setInterval(function(){
	if(!($moveDiv.is(':hover'))){
		left = parseInt($moveDiv.css('left'))
		$moveDiv.animate( {'left' : (600-left)}, "slow" );
	}
}, 3000 );

さて、ところで最初に『jQueryにはhover擬似クラスは対応してないはず』と書き、その後にisメソッド内だと対応していると書きましたが、よくよく考えたら試してないので下記のようなコードで試してみました。

$('#moveDiv').mouseenter(function(){
	$('#moveDiv:hover').css('background-color', 'red')
});

mouseenterはその要素にマウスが入ったら、つまりhover状態になったら実行するイベントです。なので、mouseenterのイベントが発動した時には確実にカーソルが要素上に乗っている状態なので、hover擬似クラスが対応していたら背景が赤くなるはずです。

普通に赤くなりました。実行サンプル：jQueryのhover擬似クラス

うーん。なんで自分はできないと思いこんでたんだ・・・(まあ、こんな使い方することはめったにないとは思いますが)。