Question

我有div，其中包含div，其中包含另外两个div s：

<div class="container">
    <div class="overlay">
        <div class="title">Some title</div>
        <div class="description">Some description</div>
    </div>
</div>

我的CSS：

div.container {
    width: 220px;
    height: 160px;
    display: inline-block;
    position: relative;
}

div.container div.overlay {
    margin: 0;
    position: absolute;
    bottom: 0px;
    width: 220px;
    padding: 0;
}

这与其他一些不相关的CSS一起，使得第二张图片显示了这些内容。现在我需要制作一些其他CSS，使其像默认情况下的第一张图片一样。当您将鼠标移到.container上时，.description应该会滑入，使其像第二张图片一样：

enter image description here

我无法弄清楚如何定位所有内容并让描述滑入。你能吗？

这个问题只是关于定位和jQuery需要滑动描述 - 颜色和其他布局不是问题。我正在寻找兼容所有主流浏览器的解决方案。

修改：

忘了提及我不知道.title或.description的高度 - 高度设置为auto，因为它取决于那里的文字。

Answer 1

您需要使用Javascript来执行此操作，因为解决方案取决于了解说明的高度。你提到了jQuery - 这是代码：

$(function slideDescriptionOnHover(){
    $('.container').each(function adjustOverlayPosition(){
        var $overlay     = $(this).find('.overlay');
        var $description = $(this).find('.description');

        function slideUp(){
            $overlay.animate('bottom', 0);
        };

        function slideDown(){
            $overlay.animate('bottom', -$description.height());
        };

        $(this).hover(slideUp,slideDown);

        $overlay.css('margin-bottom', -$description.height());
    });
});

我认为您想要为效果设置动画：如果不是，请将animate方法替换为css。

关于发生了什么的简要指南：

对于每个.container（它们可能有不同的高度描述，具体取决于每个文本包含多少文字）......
我们要制作动画的.overlay和.description的绑定变量，其高度决定了我们想要制作动画的方式。
定义2个函数：将bottom设置为0的函数，确保.overlay的最底部与.container的底部对齐;另一个将.overlay的底部向下拉.description的高度。
将这两个函数绑定到jQuery悬停方法（mouseover和mouseout的别名）
...最后，确保隐藏描述以开始。

您还需要调整div.container的规则，使其包含属性：

overflow: hidden

Answer 2

这可以用纯css 3来完成。

由于无法从0到auto进行高度转换，因此使用max-height代替：

.description  {
    max-height: 0;
    transition: 2s;
    overflow:hidden;
}

div.container div.overlay:hover .description {
  max-height: 160px;
}

纯 css 解决方案：http://jsfiddle.net/DkAKt/1/

即使您不知道描述的高度，此解决方案仍然有效。

CSS 3转换需要Internet Explorer 10+：http://caniuse.com/#search=transitions。没有动画，旧版本仍然可以使用。

如果你不能在IE 8-9中没有动画，你必须使用javascript：

jQuery(function($){
  $(".container").on('mouseenter', function(){
    $(".description", this).stop(1,1).slideDown();  
  }).on('mouseleave', function(){
    $(".description", this).stop(1,1).slideUp();  
  })
  .find('.description').slideUp(0);
});

纯 jQuery 解决方案：http://jsfiddle.net/DkAKt/2/

Answer 3

对于纯CSS解决方案，您需要稍微移动.overlay div。

bottom:-30px;。

然后您不想显示该部分，因此请将overflow:hidden;添加到.container。

现在，当你将鼠标悬停在它上面时，你需要将它抬起来。

.overlay:hover
{
    bottom:0;
}

现在让它更强大漂亮，使用transition。

.overlay
{
     bottom:-30px;
     -webkit-transition:bottom 2s;
        -moz-transition:bottom 2s;
          -o-transition:bottom 2s;
             transition:bottom 2s;
}
.overlay:hover
{
    bottom:0;
}

Answer 4

这应该非常简单，添加以下CSS：

div.container {
    overflow:hidden;
}

div.overlay {
    bottom:-30px;
    -webkit-transition:bottom 500ms;
    -moz-transition:bottom 500ms;
    -o-transition:bottom 500ms;
    transition:bottom 500ms;
}

div.description {
    height:30px;
}

div.container:hover > div.overlay {
    bottom:0;
}

应该这样做。如果没有，请删除＆gt;选择器，它们可能太具体了。

定位＆amp;滑动HTML元素

4 个答案: