0

我有一个div其中包含一个div包含其他两个divs：

<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应该会滑入，使其像第二张图片：

在此处输入图像描述 在此处输入图像描述

我不知道如何定位所有内容并让描述滑入。你能吗？

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

编辑：

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

4

4 回答 4

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.

关于正在发生的事情的简要指南：

  1. 对于每个.container（它们可能有不同的高度描述，取决于每个包含多少文本）......</li>
  2. 绑定.overlay我们想要动画的 和 的变量.description，它的高度决定了我们想要动画的方式。
  3. 定义 2 个函数：一个设置bottom为0，确保.overlay行的最底部与.container' 底部对齐；另一个将底部的底部.overlay拉低.description.
  4. 将这两个函数绑定到 jQuery hover 方法（mouseover和的别名mouseout）
  5. …最后，确保描述是隐藏的。

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

overflow: hidden
于 2013-02-26T16:56:54.503 回答
1

这可以使用纯 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/

于 2013-02-26T16:58:41.080 回答
0

对于纯 CSS 解决方案，您需要将.overlaydiv 向下移动一点。

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;
}
于 2013-02-26T16:51:07.377 回答
0

这应该很简单，添加以下 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;
}

那应该这样做。如果没有，请删除 > 选择器，它们可能过于具体。

于 2013-02-26T16:51:12.047 回答