CSSで<a>のスタイルを変えるってのはよくやる。。

---

  

---

▲たとえばこんな感じかな。hoverしたときにオーバーラインもでるように操作してる。  

<div style="background-color:#FFC; padding:5px;">
<a href="javascript:void(0);">リンク1</a>
</div>

<br />
<br />

<div style="background-color:#FFC; padding:5px;">
<a href="javascript:void(0);">リンク2</a>
</div>

▲HTMLはこんな感じでぇー、

a{
	color:#333;
}
a:hover{
	text-decoration: underline overline;
}

▲CSSのソースはこんな感じ。  

でも！

---

  

---

▲こんなこともしたいよねぇ。一つ上の階層になる<div>のスタイルを変更してバックの色変更って感じ。
もちろん<a>をブロック要素にして、幅を指定してやれば同じようなことができるんだけどね、
場合によっては、それができなかったり、2つ上の階層のタグまで変更したいってこともなくはない（っていうか、デザイナのわがままでそういうこともけっこうある）

こんなときjQueryが便利なんですよ。（石原良純風に。）  

<script type="text/javascript">
$(document).ready( function(){
	//「a」タグに対して動作を定義する。
	//hoverメソッドでonmouseoverとonmouseoutが一気に指定できる。
	$('a').hover(
		//over時の動作指定
		function(){
			//parentでaの一つ上のHTML要素つまり親要素を取得できる。
			//そしてその取得した親要素に対してcssメソッドで背景色を変更
			$(this).parent().css( 'background-color', '#FCF' );
		}
		,
		//out時の動作指定
		function(){
			//over時と同じ。色を元に戻している。
			$(this).parent().css( 'background-color', '#FFC' );
		}
	);
});

</script>

▲こんなコードを書いてやれば比較的簡単に実現できます。（もちろん、このコードを書く前にjQueryをロードしてね）
 
 
・$(document).ready()は、HTMLの読込完了時、ready()のカッコの中の動作しろよこんにゃろー！
・$(‘a’)は、タグ<a>に対して何かしますよっていう意味。$(‘#id’)ってやれば特定IDが取得できる！$(‘.class’)ってやれば特定セレクタを取得できる！（←CSSと一緒だ！！）
・.parent()は、呼び出した要素の親要素を取り出したいよというときにつかう。上の例だと<a>の上位タグの<div>を取得していることになる。
・.hover( 1, 2 )は、$(xx)で呼び出した要素に対して、onmouseoverのとき1の内容、onmouseoutのとき2の内容を実行せよという意味。
・.hover()の引数はそれぞれ関数形式で指定する。
・.hoverの中ではわざわざ$(‘a’)とかやらなくても、$(this)で対象要素を取得できる！
・css( 1, 2 ) はそのまんま。その要素のCSSの1のプロパティを2に変えろ！っていう意味。

まったくもってプログラミング勘というか、JS勘がないと理解苦しいかもしれないけど、コピペでJSのコードをHTMLの中に埋め込んだことがある人なら、コピペでちょっといじるとうまいことつかえるんじゃないかなー。

なによりいいのは、HTMLとCSS自体はわりとすっきりとしているってところがいい。メンテナンス性の悪いHTMLやCSSほどタチの悪いものはないからねぇー。

ほぃじゃぁーねー(^-^)ﾉｼ