写真は上記の通りです。 。画像をダウンロードして試してください。 。効果は良好です。 。 JS を使用してリモートに直接接続するだけです コードの再利用性が低い。 。専門家が私に何をすべきかアドバイスをくれることを願っています コードをコピーします コードは次のとおりです: < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> テスト ナビゲーション <br>$(document).ready(function() <br>{ <br> var datacss=[" ホーム","ゲーム","ジン","コミュニティ","カレンダー","参加"]; <br>for(var i=0;i<datacss.length> { <br>$ ("#" datacss[i]).append("<div class='" datacss[i] "'></div>"); [i]). css('opacity', 0); <br>$("#" datacss[i]).hover( <br>function() <br>{ <br>$("." id).stop( ).animate({opacity: '1'},800); <br>}, <br>function() <br>{ <br>$("." this.id).stop( ).animate({ 不透明度: '0'},800); <br>} <br>}); css"> <br>body { } ul li{ list-style:none; float:left; margin:0; padding:0;} <br>#home{background: url(navigation.jpg) 左上 no-繰り返し; <br> 幅: 90px; 高さ: 55px; <br>} <br>.home {背景: url(navigation.jpg) 0 -55px; <br> 幅: 90px; 高さ: 55px; 🎜>} <br>#game{background: url(navigation.jpg) -90px 0px; <br>width:114px; height:55px;ナビゲーション.jpg) - 90px -55px 繰り返しなし; <br>幅:114px; 高さ:55px; <br>#zine{背景: url(navigation.jpg) -204px 繰り返しなし; 🎜>幅:96px; 高さ:55px; <br>} <br>.zine{背景: url(navigation.jpg) -204px -55px 繰り返しなし; <br>幅:96px; } <br># コミュニティ{背景: url(navigation.jpg) -300px 0px; 繰り返しなし <br>幅: 144px; 高さ: 55px; jpg) -300px - 55px リピートなし; <br>幅:144px; 高さ:55px; <br>#calendar{background: url(navigation.jpg) -446px リピートなし;幅:137px; 高さ:55px; <br>.calendar{背景: url(navigation.jpg) -446px -55px; <br>幅:137px; 🎜>#participate{background: url(navigation.jpg) -583px 0px; no-repeat; <br>width:135px; height:55px; -583px -55px; <br>幅:135px; 高さ:55px; <br></head> ;ul> <br><li><a href="#"><div id="home"></div></a></li> li><a href="#"><div id="ゲーム"></div></a></li> <br><li><a href=" #"><div id="zine"></div></a></li> <br><li><a href="#"><div id ="コミュニティ"></div></a></li> <br><li><a href="#"><div id="calendar"> /div></a></li> <br><li><a href="#"><div id="参加"></div></a> </li> <br></ul> <br><br><br></datacss.length> </div>