jQueryゼロから / show, hide (マウスオーバーで表示・非表示を切り替える)


エフェクトの基本、show(), hide() やってみる。
マウスオーバー、マウスアウトで表示を切り替えてみます。

1
2
3
4
<span id="target">
    <span id="on" style="display: none;">マウスオーバー</span>
    <span id="off">マウスアウト</span>
</span>

こんな感じでマウスオーバー時のデータを非表示にしておいて、下記のようにして切り替えます。

1
2
3
4
5
6
7
$('#target').mouseover(function(){
    $('#off').hide();
    $('#on').show();
}).mouseout(function(){
    $('#on').hide();
    $('#off').show();
});

jQuery は $(‘#target’).mouseover().mouseout(); の様にドットで処理を連続して書けるのが便利です。

サンプル

2011.01.28 追記
mouseover / mouseout より hover (mouseenter / mouseleave) の方が余計なイベントが発生しないのでおすすめです。
hover については上記サンプルと下記に補足しました。
jQueryゼロから / hover (オンマウスでアニメーション)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です