jQueryで遊んでみる その5

いつまでつづくこのシリーズ..

jQueryで動的にCSSを割り当てられるのでやってみた。

サンプル→

サンプルのソースはこんなふう

<script type="text/javascript">
 
$(function(){
 
	//初期状態
	$(".camcam").css({
	backgroundColor:"red",
	width:"200px",
	fontSize:"20px"
	});
 
	//ロールオーバー
    $(".camcam").mouseover(function() {
       $(this).css({backgroundColor:"#00ff00"});
	});
 
	//ロールアウト
    $(".camcam").mouseout(function() {
  	  $(this).css({backgroundColor:"red"});
	});
 
});
 
</script>
CSSだと、background-color:#00ff00; と書くところ、

backgroundColor:”#00ff00″
と、ハイフンを取って次の字を大文字にすることと
値はダブルクオーテーションで囲むという違いがある。
カンマ区切りでいくつでも割り当てられる。

このサンプル程度だとCSSで完結出来てしまうけど、
a:hoverではない、リンクテキスト以外にも使えたり
画像のサイズを変えたり、アイデア次第でいろいろできそうだ。

じゃあどんなのができるか次回あたりで。

You might also like