Question

I actually want to display an relation between to lists and several images by mouseover of any item.
So photographers and Style and the Images have many different classes which then could be selected.
Is there any dynamic way to check any elements class on mouseoverand then highlight any other element on the site and highlight it to?

For Example:
Mouseover on photographer1 highlight Style A, C, F and H but also the images with the class from the photographers.
On the other side hover Style A and Photographers 1 and 2 will get highlighted and also the corresponding pictures,

In Addition to that:
How can it be solved to let a Photographer be clicked and the highlight be rembember on mouseout?

There is a similliar thread about that but not with a second seperate list

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

Try this:

CSS

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

jQuery

$(function() {
    $("#listing A").on('mouseover click', function() {
        $("#wrapper_image IMG").removeClass("highlight");
        var classes = $(this).attr("class").split(/\s+/);
        for (var i = 0; i < classes.length; i++){
            $("." + classes[i]).addClass("highlight");
        }
    });
});