根据高度div移动div到他

时间：2015-05-08 19:03:54

标签： javascript html css css3 animation

我正在制作信息横幅。它们之间的div很少有div个，其上有悬停遮罩。在悬停时，他们会更改文字。有时悬停文本会比父级文本更长，悬停文本下方的div.quick-banner { width: 440px; margin: 0 0 0 15px; position: relative; } div.quick-banner div.mask-banner { width: 420px; position: absolute; top: 0; left: 0; padding: 10px; text-align: center; } div.quick-banner div.mask-banner h2 { color: #fff; text-align: center; position: relative; font-size: 17px; padding: 3px; background: rgba(0, 0, 0, 0.8); margin: 0; } div.quick-banner div.mask-banner { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: #004f6e; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } div.quick-banner:hover div.mask-banner { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } div.quick-banner div.mask-banner h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } div.quick-banner div.mask-banner:hover h2, div.quick-banner div.mask-banner:hover p, div.quick-banner div.mask-banner:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } div.quick-banner div.mask-banner p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }应该在悬停文本下移动。

<div class="quick-banner">
    <div class="main-banner">
        <h2>Head 1</h2>
        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
        <h2>Head HOVER 1</h2>
        <p>Text after hover longer (3-5 rows). Text after hover       longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
<div class="quick-banner">
    <div class="main-banner">
        <h2>Head 2</h2>
        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
        <h2>Head HOVER 2</h2>
        <p>Text after hover longer (3-5 rows). Text after hover       longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
div

在悬停时，我更改了主横幅和蒙版横幅的不透明度，这是有效但第二个div出现在悬停的文字上。 是否有解决方案（纯CSS最好）根据悬停文本的相对高度移动悬停div下的下一个first, last？

1 个答案:

答案 0 :(得分：1)

您将无法将position: absolute;用于.mask-banner，因为它会将其从文档流中删除，而其他元素将无法识别它。你可以通过以下方式解决这个问题：

  • 将hover检测移至父.quick-banner
  • 在流程中保留.mask-banner（请勿使用position: absolute;）
  • 隐藏.main-banner悬停时的.quick-banner内容

为了保持动画的完整性，您将无法使用mask-banner隐藏display: none;，因此您可以使用height: 0;和overflow: hidden;来完成此操作。

div.quick-banner {
    width: 440px;
    margin: 0 0 0 15px;
    position: relative;
}
div.quick-banner div.mask-banner {
    width: 420px;
    position: relative; /*Change this*/
    top: 0;
    left: 0;
    padding: 0; /*Change this*/
    text-align: center;
    height: 0; /*Add this*/
    overflow: hidden; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.8);
    margin: 0;
}
div.quick-banner div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #004f6e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
div.quick-banner:hover div.mask-banner {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    height: auto; /*Add this*/
    padding: 10px; /*Add this*/
}
div.quick-banner div.mask-banner h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/*Change this*/
div.quick-banner:hover div.mask-banner h2, div.quick-banner:hover div.mask-banner p, div.quick-banner:hover div.mask-banner a.info {
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
div.quick-banner div.mask-banner p {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
/*Add this*/
div.quick-banner:hover div.main-banner {
    display: none;
}
<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 1</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 1</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>
<div class="quick-banner">
    <div class="main-banner">
         <h2>Head 2</h2>

        <p>This is first text of first banner.</p>
    </div>
    <div class="mask-banner">
         <h2>Head HOVER 2</h2>

        <p>Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows). Text after hover longer (3-5 rows)</p>
    </div>
</div>

JS小提琴： http://jsfiddle.net/xtfzgrcm/2/

相关问题
最新问题