突出显示链接和悬停时具有相同属性的图像

我实际上想通过任何项目的鼠标悬停来显示列表和多个图像之间的关系。因此，摄影师和风格和图像有许多不同的类，然后可以选择。 是否有任何动态的方式来检查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

突出显示链接和悬停时具有相同属性的图像

回答

相关问题