獲取內容使用jquery中的懸停在個人div中顯示

Question

因此，我使用bootstrap和jquery構建在線投資組合。我有一組排列並格式化的圖像，我試圖讓每個圖像的描述在單個圖像懸停時彈出。每個圖像都包裝在一個「.col-md-3」標籤中，並在圖像標籤下面有一個「.description」標籤，其中包含信息。當用戶懸停在任何圖片標籤上時，我可以獲取所有描述，但當單個圖片懸停時，我無法獲取描述以顯示一張圖片。

HTML: 
<div class="col-md-3 col-sm-6"> 
    <a href="Blevels/currentportfoliohome.html"> 
    <img src="Images/Faces/CurrentPortfolioface.jpg" alt="Overview of this Portfolio"></a> 

    <div class="description"> 
    <p>These are the wireframes and sitemaps for this portfolio</p> 
</div> 
JQuery: 
$(document).ready(function() { 

    $(".description").hide(); 

    $(".col-md-3").hover(function() { 
     $(".description").show(); 
    },function() { 
     $(".description").hide(); 
    }); 
}); 

如何讓瀏覽器選擇單個描述<div>■當個體圖像上空盤旋？

Answer 1

您應該使用$(this)這將參考被盤旋的.col-md-3。然後你可以使用.find()將尋找後代.description：

$(this).find(".description").show(); 

全部JS

$(".description").hide(); 
$(".col-md-3").hover(
    function(){ 
     $(this).find(".description").show(); 
    }, 
    function(){ 
     $(this).find(".description").hide(); 
    } 
); 

FIDDLE