2012年1月2日月曜日

jQuery - メニューをマウスオーバーしたら色変える

非常に簡単な話ですがメモ。大体jQueryも分かってきたのですが、cssの設定方法などもいくつかパターンがあるようで、あとbackground-colorという記載が通常のcssの表記法だと思うのですが、jQueryの場合は、backgroundColorだったりしてなんかややこしい。多分キャメル法で統一されたりしてるのかも。そうじゃなかったら一々確認するのめんどくさいですからね。 下記は、ul#menuの子供にliが沢山あって、liにはそれぞれ固有のidが割り振られている状態を想定しています。


$(function(){
 $('ul#menu li').mouseover(function(){menu_mouseover($(this).attr('id'));});
 $('ul#menu li').mouseout(function(){menu_mouseout($(this).attr('id'));});
});

function menu_mouseover(id){
 $('ul#menu li#'+id).css('backgroundColor','#0cf');
}

function menu_mouseout(id){
 $('ul#menu li#'+id).css('backgroundColor','#09c');
}

0 件のコメント:

コメントを投稿