0

我已经玩了一段时间了，但就是想不通。

但老实说，我对 javascript 还很陌生，所以这可能很明显。

我有一个 ol 旁白，您可以将鼠标悬停在页面上并影响页面上的相关图像。这很好用，但我想拥有同一个组件的多个版本。一个用于事件，另一个用于文章等。

如果我将鼠标悬停在一个组件上，它会影响另一个组件。

我在这里先向您的帮助表示感谢。

请看我的codepen http://codepen.io/veryrobert/pen/DjqLH

HTML

<div class="wrap">

 <aside class="aside">
  <ol class="list1">
   <li class="item1"><a href="">Lorem ipsum dolor sit amet.</a></li>
   <li class="item2"><a href="">Lorem ipsum dolor sit amet.</a></li>
   <li class="item3"><a href="">Lorem ipsum dolor sit amet.</a></li>
  </ol>  
 </aside>

<ul class="list2">
  <li class="item1"><a href="">
   <img src="http://placekitten.com/100/140" alt="" /></a>
  </li>
  <li class="item2"><a href="">
   <img src="http://placekitten.com/100/140" alt="" /></a>
  </li>
  <li class="item3"><a href="">
   <img src="http://placekitten.com/100/140" alt="" /></a>
  </li>
 </ul>  

</div>

jQuery

$('.list1 li').each(function(){
        $(this).hover(function() {
          var index = $(this).index();
          $(".list1, .list2").each(function() {
            $("li", this).eq(index).toggleClass("active");
          });
        });
    });

请看我的codepen http://codepen.io/veryrobert/pen/DjqLH

4

3 回答 3

1

有很多不同的方法可以做到这一点，但根据您的布局，您可以专门选择所需的.list2而不是两者。添加当前悬停的元素是一件简单的事情。

http://codepen.io/anon/pen/vuwKb

var index = $(this).index();
$(this).closest(".aside").next().find("li")
    .eq(index).add(this).toggleClass("active");
于 2013-09-05T14:52:27.580 回答
0

如果它解决了您的疑问，请检查此代码笔 http://codepen.io/anon/pen/CxnAw

于 2013-09-05T14:55:48.863 回答
0

http://codepen.io/anon/pen/jhyiK

找到父母div，然后找到ul>li您要突出显示的孩子。

$('ol li').hover(function() {
      var index = $(this).index();
      $(this).parents("div").find("ul li").eq(index).toggleClass("active");     
});
于 2013-09-05T14:59:58.160 回答