выделять ссылки и изображения с одинаковыми атрибутами при наведении

Question

Я на самом деле хочу отобразить связь между списками и несколькими изображениями при наведении курсора мыши на любой элемент. Таким образом, у фотографов и «Стиль и изображения» есть много разных классов, которые затем могут быть выбраны. Есть ли какой-нибудь динамический способ проверить любой класс элементов на mouseove, а затем выделить любой другой элемент на сайте и выделить его?

Например: При наведении курсора на фотографа1 выделите стиль A, C, F и H, а также изображения с классом от фотографов. С другой стороны наведите курсор мыши на стиль A, и фотографы 1 и 2 будут выделены, а также соответствующие изображения

.

В дополнение к этому: Как можно решить, чтобы позволить фотографу щелкнуть мышью и выделить мышкой мышкой?

Существует аналогичная нить об этом, но не со вторым отдельным списком

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

$(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");
        }
    });
});

Answer 2

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

sry, я имел в виду, что вы используете jquery ... надеюсь, это поможет, тем не менее