DEV

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

#CSS#Javascript#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’); }

$(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');
}