jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法

2010年7月23日 15:50 jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法

jQuery の hover() を使って、マウスホバーにあわせてスタイルを変更することができます。

hover(マウスが乗っているときの処理,マウスが外れたときの処理);

という形式で指定するので、例えば「list」というクラスを指定した要素に対して、マウスが乗っているときだけ「list_hover」というクラスを適用したい場合は、以下のようになります。

$(".list").hover(
	function () {
		$(this).addClass("list_hover");
	},
	function () {
		$(this).removeClass("list_hover");
	}
);

「マウスが乗っているときの処理」で「addClass」=文字通り、クラス「list_hover」を追加しています。
「マウスが外れたときの処理」で「removeClass」=文字通り、クラス「list_hover」を削除しています。

Twitterつぶやく
阿部辰也へのお仕事のご依頼・お問合せはこちら

Twitter始めました。Followはお気軽にどうぞ。

関連するブログ記事
スポンサード リンク
カテゴリー
jQuery
タグ
CSS | hover | JavaScript | jQuery
現在位置
TOP > Web制作技術 > jQuery > jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法
前のブログ記事
jQuery の入門というか初歩というかそういう話 [2010年7月22日 16:48]
次のブログ記事
jQuery で POSTメソッドによる非同期通信を行なう方法 [2010年7月26日 17:28]

トラックバック(0)

このブログ記事に対するトラックバックURL:

コメント(9)

plain green loans [2014年8月22日 01:00]

nsaqha http://paydayloansvmp.com/ plain green loans

money mutual [2014年9月 1日 20:44]

ssnmrhyq http://paydayloansvmn.com/ money mutual

payday loans [2015年2月13日 07:45]

nsmcxf http://paydayloansqdq.com/ payday loans

avdvuux [2015年6月 2日 01:21]

hmbymg

hello [2015年6月 4日 12:29]

aalvyvlv goznnyos

hello [2015年6月 4日 16:47]

kbqyve [url=http://njhpof.com/]tctlxvt[/url]

hello [2015年6月 4日 20:55]
payday loans [2015年7月 3日 10:14]

xqfugohm http://paydayloanssqm.com/ payday loans

viagra [2016年4月16日 17:13]

Hello!

コメントする


画像の中に見える文字を入力してください。

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム