javascript - jQuery Hover 用于组中的单个元素

Question

我有一组正在动态填充的 div，突出显示个人的照片和姓名，总共大约一百个:

HTML:

<div class="profile-pic-wrap">
     <div class="profile-pic">
          <div class="profile-btn-bg">
               <a href="#linktoBio">
                    <img class="instructor" src="bioPic.jpg" border="0">
               </a>
          </div>
     </div>
     <a href="#linktoBio" class="instructor-name">Name of Guy</a>
</div>

CSS:

.profile-btn-bg a, a.instructor-name{
     background: none;
}

.profile-btn-bg a.hovered, a.instructor-name.hovered, .profile-btn-bg a:hover, a.instructor-name:hover{
     background: #ff0000;
}

我想写一些 og jQuery，当你将鼠标悬停在包含图像的链接上时，该链接的样式和包含名称的链接都会发生变化，反之亦然。

我有这个:

$(document).ready(function(){
    $(".profile-btn-bg a").hover(function(){
        $("a.instructor-name").toggleClass("hovered");
    });

    $("a.instructor-name").hover(function(){
        $(".profile-btn-bg a").toggleClass("hovered");
    });
});

但这改变了所有人，而不仅仅是我悬停的那组。有什么想法吗？

Answer 1

您可以处理传递给悬停回调的默认参数(Event eventObject)，例如:

$(document).ready(function(){
  $(".profile-btn-bg a").hover(function(event){
      event.target.toggleClass("hovered");
  });

  $("a.instructor-name").hover(function(event){
      event.target.toggleClass("hovered");
  });
});