jQueryは画像の強調表示を実現します

<本文>
 <div>
 /*画像を追加*/
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  <img src="img/6.jpg">
 </div>
</本文>

<スタイル>
 html{背景:#000;}
 div{
  幅:700ピクセル;
  高さ:410px;
  境界線:1px実線 #ddd;
  マージン:50px 自動;
  パディング:0 20px;
 }
 div画像{
        マージン: 10px 10px 0 20px;
    }
</スタイル>

<スクリプト>
// 大きなボックスにホバーイベントを追加します $("div").hover(function(){
 // 各画像にホバーイベントを追加します $("img").hover(function(){
            // 現在の画像にアニメーションを追加して透明度を変更します $(this).stop(true).animate({opacity:1},100)
                $(this).siblings().stop(true).animate({opacity:.5})
            })
        })
        // マウスが大きなボックスから離れると、透明度を変更するアニメーションを追加します $("div").mouseout(function(){
            $("img").animate({不透明度:1},100)
        })
</スクリプト>