突出顯示鏈接和懸停時具有相同屬性的圖像

我實際上想通過任何項目的鼠標懸停來顯示列表和多個圖像之間的關係。因此，攝影師和風格和圖像有許多不同的類，然後可以選擇。 是否有任何動態的方式來檢查mouseove上的任何元素類，然後突出顯示該網站上的任何其他元素並將其突出顯示？突出顯示鏈接和懸停時具有相同屬性的圖像

How it works and looks like...

例如： 鼠標懸停在photographer1高亮樣式A，C，F和H還具有從攝影師類的圖像。 另一方面hover樣式A和攝影師1和2將得到凸顯以及相應的圖片，

除此之外：怎樣纔可以解決，讓被點擊一個攝影師和亮點在mouseout上註冊？

有一個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>

來源

2012-02-07 Jannis M

你可以張貼所組成圖像的該網格的HTML。 – 2012-02-07 10:21:11

添加標記... – 2012-02-07 10:29:57

試試這個：

CSS

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

jQuery的

來源

2012-02-07 10:42:09

正是我在找的！謝謝 – 2012-02-07 10:43:31

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

SRY，我暗示你使用jquery ...希望這有助於仍然

來源

2012-02-07 10:35:21 Christoph

$（「。pg 」） - >這是一個合法的選擇器嗎？ – 2012-02-07 10:36:38

突出顯示鏈接和懸停時具有相同屬性的圖像

回答

相關問題