Question

我已经玩了一段时间了，但是无法理解。

但说实话，我对javascript很新，所以这可能是一个明显的问题。

我暂停了你的悬停，并影响页面上的相关图像。这工作正常，但我希望有相同组件的多个版本。一个用于事件，另一个用于文章等。

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

感谢您的帮助。

请看我的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

Answer 1

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

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

var index = $(this).index();
$(this).closest(".aside").next().find("li")
    .eq(index).add(this).toggleClass("active");

Answer 2

请检查此代码笔是否能解决您的疑问 http://codepen.io/anon/pen/CxnAw

Answer 3

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

将鼠标悬停在ol上并影响同一页面上具有多个版本的另一个特定元素

3 个答案: