画像置換1

1.css

/*
マウスオーバーでaの背景画像のopacityを1にする。CSS3のtransitionでもできる
li:hover{opacity:1;}
li{transition:0.5s;}
*/
div#header ul#header_menu li.header_link03 {
	background-image: url(../images/header_link03.png);
	background-repeat: no-repeat;
}
div#header ul#header_menu li.header_link03 a {
	background-image: url(../images/header_link03.png);
	background-position: -130px 0px;
}
div#header ul#header_menu li a {
	display:block;
	height:115px;
	width:130px;
	text-indent:-9999px;
}

1.htm

<li class="header_link03">
    <a href="#staff" style="opacity: 0; ">03 スタッフ</a>
</li>

1.js

$(document).ready(function(){
	$(function() { 
		$("div#header ul#header_menu li a").css("opacity","0");
		//初期設定として画像のopacityを0にします。
		$("div#header ul#header_menu li a").hover( //hoverです。
			function () {
				$(this).stop().animate({opacity: 1}, 'fast');},
				//マウスオーバー時にopacityを1にします。
			function () {
				$(this).stop().animate({opacity: 0}, 'fast');}
				//マウスアウト時にopacityを0に戻します。
		);
	});
});