Jquery hover trggering all divs

Question

請原諒我，但我仍然是jQuery的新手。 我有一個網站上有一些高爾夫球包。我試圖做的是當你將鼠標懸停在包上時，價格在包的圖像下滑落，並且視圖包按鈕在圖像頂部淡入。

我寫了一些代碼，頁面上只有一個包。但是當頁面上有多個軟件包時，就會出現問題。當你將鼠標懸停在其中任何一個所有的包被觸發

$(document).ready(function() { 
    $(".FPImage").hover(function() { 
     $(".FPPrice").stop(true, true).slideDown(400); 
     $(".FPFade").fadeIn('slow'); 
    }, function() { 
     $(".FPPrice").stop(true, true).delay(10).slideUp(400); 
     $(".FPFade").fadeOut('slow'); 
    }); 
}); 

HTML標記起來是

<div class="FPBox"> 
    <div class="FPName">Package Name</div> 
    <div class="FPImage"> 
     <img src="" alt="Package" border="0" /> 
     <div class="FPFade" style="display:none">View Package</div> 
    </div> 
    <div class="FPPrice" style="display:none;">Price</div> 
</div> 

任何幫助我如何能只針對我徘徊在代替DIV不勝感激的所有觸發

Answer 1

問題是，你正在觸發所有的類。你只需要觸發是.FPImage DIV中

嘗試類似下面的類：

$(document).ready(function() { 
    $(".FPImage").hover(function() { 
     var $this = $(this); 
     $this.next(".FPPrice").stop(true, true).slideDown(400); 
     $this.find(".FPFade").fadeIn('slow'); 
    }, function() { 
     var $this = $(this); 
     $this.next(".FPPrice").stop(true, true).delay(10).slideUp(400); 
     $this.find(".FPFade").fadeOut('slow'); 
    }); 
}); 

Answer 2

你需要找到相關的元素

$(document).ready(function() { 
    $(".FPImage").hover(function() { 
     $(this).next(".FPPrice").stop(true, true).slideDown(400); 
     $(this).find(".FPFade").stop(true, true).fadeIn('slow'); 
    }, function() { 
     $(this).next(".FPPrice").stop(true, true).delay(10).slideUp(400); 
     $(this).find(".FPFade").stop(true, true).fadeOut('slow'); 
    }); 
}); 

的FPPrice元素的下一個兄弟，其中作爲FPFade是孩子

演示：Fiddle

Answer 3

在下面的代碼行的$(".FPPrice")：

$(".FPPrice").stop(true, true).slideDown(400); 

將在頁面上選擇所有FPPrice類節點。

你可能想：

// find the parent ".FPBox" starting from the current node : 
var $box = $(this).closest(".FPBox"); 
// search only inside this box : 
$box.find(".FPPrice").stop(true, true).slideDown(400); 
$box.find(".FPFade").fadeIn('slow');