ホバーで同じ属性のリンクと画像を強調表示します

Question

実際には、リストと複数の画像との関係をマウスオーバーで表示したいと考えています。 写真家とスタイルと画像にはさまざまなクラスがあり、それらを選択することができます。 mouseoverで要素クラスをチェックし、サイトの他の要素を強調表示して強調表示する動的な方法はありますか？

例について

：photographer1ハイライトスタイルA、C、F及びHが、また写真家のクラスの画像に マウスオーバー。反対側ホバースタイルAで とカメラマン1と2がハイライト表示され、また、対応する画像、それに加えて

れます：カメラマンがクリックさせるために解決することができますどのように とハイライトマウスアウト時にrembemberする？

二別々のリストとそのことについてsimilliar threadなく

MARKUP

<div id="listing"> 
     <div id="photographers"> 
     <li><a href="#" class="pg1" >Photographer 1</a></li> 
     <li><a href="#" class="pg2" >Photographer 2</a></li> 
     <li><a href="#" class="pg3" >Photographer 3</a></li> 
     </div> 
     <div id="styles"> 
     <li><a href="#" class="pg1 pg3" >Style A</a></li> 
     <li><a href="#" class="pg3" >Style B</a></li> 
     <li><a href="#" class="pg1 pg2" >Style C</a></li> 
     <li><a href="#" class="pg2 pg3" >Style D</a></li> 
     <li><a href="#" class="" >Style E</a></li> 
     <li><a href="#" class="pg2 pg1" >Style F</a></li> 
     <li><a href="#" class="pg3" >Style G</a></li> 
     <li><a href="#" class="pg1 pg2 pg3" >Style H</a></li> 
     </div> 
    </div> 

    <div id="wrapper_image" class="photographers"> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/1.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/2.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/3.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/4.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/1.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/2.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/3.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/4.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/1.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/2.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/3.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/4.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/1.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/2.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/3.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/4.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/1.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/2.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/3.jpg" title="" alt="" class="pg2"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/4.jpg" title="" alt="" class="pg1"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/5.jpg" title="" alt="" class="pg3"/> 
     <img src="<?php bloginfo('template_url'); ?>/media/home/thumbs/6.jpg" title="" alt="" class="pg1"/> 
    </div> 

Answer 1

試用：

CSS

#wrapper_image IMG { 
    opacity: 0.5; 
} 
#wrapper_image IMG.highlight { 
    opacity: 1.0; 
} 

jQueryの

​​

Answer 2

$(".pg<x>").hover(function(){ 
    $(".pg<x>").<do what you want here> (.css or .addClass ...) 
}); 

SRYがありますが、私はあなたがjqueryの使用暗黙の...これはそれにもかかわらず

役に立てば幸い