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的显示设置为无

使用ID代替类也会好得多，这就像：

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

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

PS：再次使用jQuery，所以你需要在head部分（最好）和此代码之前实现它

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

3 个答案: