jquery에서 호버를 사용하여 개별 div에 콘텐츠 표시하기

Question

그래서 저는 부트 스트랩과 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을 가리키며 사용해야합니다.

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

전체 JS

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

FIDDLE

: 그럼 당신은 자손 .description을 찾습니다 .find()을 사용할 수 있습니다