jQueryによるマウスオーバー処理の履歴

履歴一覧

hoge_off.jpg hoge_on.jpgという画像ファイル名にして自動で切り替える

通常

$(document).ready(function(){		   
	$("img[src*='_on']").addClass("current");
	$("img,input").mouseover(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
		}
	});
	$("img[class!='current'],input").mouseout(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
		}
	});
});

選択された部分はmouseoutしてもそのまま

var flug = 1;

$(document).ready(function(){		   
	$("img[src*='_on']").addClass("current");
	$("img,input").mouseover(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_off.", "_on."));
		}
	});
	$("img[class!='current'],input").mouseout(function(){
		if ($(this).attr("src")){
			$(this).attr("src",$(this).attr("src").replace("_on.", "_off."));
			$('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg");//
		}
	});
	$('a#a_tab'+flug+' img').attr("src","img/tab"+flug+"_on.jpg");
});

function tabs(id){
	$('#tab1').css("display" , "none");
	$('#tab2').css("display" , "none");
	$('#tab'+id).css("display" , "block");
	$('a#a_tab1 img').attr("src","img/tab1_off.jpg");
	$('a#a_tab2 img').attr("src","img/tab2_off.jpg");
	$('a#a_tab'+id+' img').attr("src","img/tab"+id+"_on.jpg");
	flug = id;
}


trとかdivとかリンクじゃないやつもマウスオーバー反転させられる

<script>
    $("table.hoge tr").mouseover(function(){
			$(this).addClass("active");
    }).mouseout(function(){
			$(this).removeClass("active");
    });
</script>

selectされたoptionに応じてアクション

				$("select").change(function () {
				  $("select#"+$("select#hoge").val()).css("display","block");
				})
				.trigger('change');