javascript - 使用 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