Coder's Note

jQueryのhover()でIEでも:hoverっぽい効果を使う

IEで<a>以外の要素にも:hoverが使えたら便利だな…とお嘆きの方へ。jQueryのhover()を使えば同じ用なことが簡単にできてしまいます。
onmouseoverやonmouseoutでも同じ効果をつけることができますが、:hoverを使いたい要素すべてにつけなければいけないので面倒です。

hover()

jQueryの便利なメソッドhover()。これを使うことでどんな要素にもマウスオーバーとマウスアウトの効果をつけることができます。

$('.selector').hover(
    function() {
        // onmouseover
        // マウスオーバー時のアクション
    },
    function() {
        // onmouseout
        // マウスアウト時のアクション
    }
);

使い方はサンプルコードをみてください。1つ目にマウスオーバー時のアクション、2つ目にマウスアウト時のアクションを指定することで:hoverのようなことができます。

クラスを切り替える

制作の現場（僕がいた現場）でもこのhover()はよく使ったのですが、CSSのスタイルを変えたいという程度の場合にjQueryのcss()を使ってスタイルを切り替えるよりもあらかじめCSSにスタイルを定義しておいてクラスを切り替える方が簡単です。

デモ

マウスを乗っけてみてください

#demo {
    color: #000;
    background: #FFF;
}

#demo:hover {
    color: #FFF;
    background: #2B3C45;
}

このCSSと同じ効果をjQueryで指定するにはこのように書きます。

CSS

CSSであらかじめ#demo:hoverと同じスタイルをクラスで指定します。

#demo {
    color: #000;
    background: #FFF;
}

.hover {
    color: #FFF;
    background: #2B3C45;
}

JavaScript

jQueryではマウスが乗ったときにhoverというクラスを追加し、マウスが離れたときにそのクラスを削除するように記述します。

$(function() {
    $('#demo').hover(
        function() {
            $(this).addClass('hover');
        },
        function() {
            $(this).removeClass('hover');
        }
    );
});