[jQuery]背景画像の位置を変更して表現するロールオーバーを作ってみました。

サイトのメニューにマウスをのせることによって見た目が変わるロールオーバー。実現したいビジュアルや、ブラウザの条件、使える技術などにより作り方がいろいろと変わってくると思いますが、今回は背景画像を上下にずらして見た目を変える方法を採用しました。以下がコードになります。

$(function(){
    $(".menu-item").mouseover(function(){
        $(this).css("backgroundPosition","0 -20px")
    }).mouseout(function(){
        $(this).css("backgroundPosition","0 0");
    })
});

.menu-itemというclass名を付けたli要素に高さと幅を指定して、以下のロールオーバー前と後を上下にくっつけた画像を背景に設置します。

ロールオーバー時には背景画像のポジションを上に20pxずらし、マウスが離れたら元に戻す、ということをjQueryを使ってCSSを書き換えることによって実現しています。教科書どおりです。

WordPressでカスタムメニューを使ってナビメニューを設定するとli要素としてテキストと一緒に出力されるので、テキストを画像置換してロールオーバーを作っています。

最初は画像のパスをjQuwryで書き換えるスクリプトを作ろうと思ったのですが上手くいきませんでした。WordPressで外部JavaScriptを使った場合、CSSで画像URLのパスを書き換えたり出力したりするのが難しい。ゆくゆく調べようと思います。