0

我在很多网站上都看到过这些。基本上，我正在创建一个投资组合，并且我有许多 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>
4

3 回答 3

0

你可以在 CSS 中使用类似这样的东西来做到这一点：

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

.thumbnail:hover img {display:none; }
.thumbnail:hover div.description {display:block; }
于 2013-04-29T20:45:09.627 回答
0

改变基本实现：

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

演示：http: //jsfiddle.net/LAkMA/

于 2013-04-29T20:46:47.320 回答
0 
<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 部分（最好）和此代码之前实现它

于 2013-04-29T20:49:43.530 回答