Question

我实际上想要通过鼠标悬停任何项目来显示列表和几个图像之间的关系。所以摄影师和风格和图像有许多不同的类，然后可以选择。 是否有任何动态方法可以检查mouseoverand上的任何元素类，然后突出显示网站上的任何其他元素并将其突出显示为？

How it works and looks like...

例如： 鼠标悬停在摄影师1上，突出显示风格A，C，F和H，以及摄影师的课程图像。 在另一边悬停风格A和摄影师1和2将突出显示，并相应的图片，

除此之外：如何点击摄影师并在鼠标移动时突出显示重点？

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

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

sry，我暗示你使用jquery ...希望这有助于

Answer 2

试试这个：

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

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

2 个答案: