Logicky BLOG

Logickyの開発ブログです

  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky

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');
}
  • Javascript
  • Python
  • PHP
  • Go
  • OS・サーバ
  • 機械学習
  • つくったもの
  • 数学
  • アルゴリズム
  • Logicky