将鼠标悬停在图片上即可解开隐藏的div

Question

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

基本上，我正在寻找类似以下的简单内容： http : //iamyuna.com/

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

以下是我的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>

Answer 1

您可以在CSS中使用以下代码进行此操作：

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

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

Answer 2

不同的基本实现：

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

演示： http ： //jsfiddle.net/LAkmA/

Answer 3

<script type="text/javascript">
$(".thumbnail img").hover(function(){ $(".description").css("display", "block"); }, function(){ $(".description").css("display", "none");});
</script>

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

同样，使用ID代替类会更好，那将是这样的：

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

然后可以将其转换为功能等

PS：再次使用jQuery，因此无论如何您都需要在头部（最好）以及在此代码之前实现它