jQuery的哈弗爲一組的單項

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

需要限制最接近.profile-pic-wrap元素中搜索

$(document).ready(function(){ 
    $(".profile-btn-bg a").hover(function(){ 
     $(this).closest('.profile-pic-wrap').find("a.instructor-name").toggleClass("hovered"); 
    }); 

    $("a.instructor-name").hover(function(){ 
     $(this).closest('.profile-pic-wrap').find(".profile-btn-bg a").toggleClass("hovered"); 
    }); 
}); 

Answer 2

您可以處理傳遞給你的懸停回調（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"); 
    }); 
});