Javascript 将鼠标悬停在图像上可展开隐藏的div

我在很多网站上看到过这些。基本上，我正在创建一个投资组合，我有一些div（网格格式的正方形）显示我的项目的屏幕截图。我希望能够将鼠标悬停在每个项目上，鼠标将在先前隐藏的div中滑动，显示关于特定项目的特定信息

基本上，我在寻找这样简单的东西：

请注意，如果您将鼠标悬停在每个形状（即项目）上，它会快速“展开”以显示下面的另一个图像。这可能是一个不好的例子，因为我想要的是显示描述，而不是另一张图片。然而，我喜欢它如何快速展开以显示隐藏的内容

下面是我的html的布局。有可能为我自己的工作实现类似的东西吗？如果你们能帮我开始做这件事，或者建议一些关键词（我已经搜索了几个小时的教程，但是找不到），我会非常感激的。多谢各位

<article class="project" data-id="248">
    <div class="project-mask">
        <div class="thumbnail">
             <img src="image.jpg">
             <div class="description">
                  <h2>Title</h2>
                  <p>Description</p>
             </div>
        </div>
    </div>
</article>

标题
描述

您只需在CSS中使用以下内容即可：

.thumbnail img { display:block; }
.thumbnail div.description { display:none; }

.thumbnail:hover img {display:none; }
.thumbnail:hover div.description {display:block; }

---

基本实施：

$('.thumbnail').hover(function () {
    $('.description', this).stop().animate({
        bottom: 0
    }, 200);
}, function () {
    $('.description', this).stop().animate({
        bottom: -100
    }, 200);
});

演示：

$（“.thumbnail img”）.hover（function（）{$（.description”）.css（“display”，“block”）；}，function（）{$（.description”）.css（“display”，“none”）；}）；

注意：这是使用jQuery完成的，您需要将.description的显示设置为none

此外，最好使用ID而不是类，这类似于：

<script type="text/javascript">
$("#IMG1").hover(function(){ $("#DESC1").css("display", "block"); }, function(){ $("#DESC1").css("display", "none");});
</script>

$（“#IMG1”）.hover（function（）{$（“#DESC1”）.css（“display”，“block”）；}，function（）{$（“#DESC1”）.css（“display”，“none”）；}）；

然后你可以把它变成一个函数等等

---

PS：同样，这使用jQuery，因此您需要在head部分实现它（最好是），在编写此代码之前，无论如何

这在CSS中会更容易。在上面放一个图层，上面有

：hover{display:none；}

如果你想要过渡效果，请看一下我想要的，谢谢！但是你能解释一下为什么

.description

设置为

bottom:-105px

而不是

bottom:100px

？我必须把jQuery放在

$（文档）之间吗？这只是一个简单的例子，所以它并不完美，底部当然应该是
-100px
。您可以将代码放在
$（function（）{…}）
之间，以确保在加载DOM树时执行代码。或者，您也可以将脚本放在正文的末尾，使其位于最后，这样您就不需要
$（function（）{…}）
。
<script type="text/javascript">
$("#IMG1").hover(function(){ $("#DESC1").css("display", "block"); }, function(){ $("#DESC1").css("display", "none");});
</script>