我正在制作信息横幅。有几个 div
彼此重叠,上面有一个悬停 mask 。在悬停时,他们会更改文本。有时悬停文本会比父级长,悬停文本下方的 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>
在悬停时,我更改了主横幅和 mask 横幅的不透明度,这是有效的,但第二个 div
出现在悬停的文本上。
是否有解决方案(纯 CSS 最好)根据悬停文本的相对高度将下一个 div
移动到悬停 div
下?
最佳答案
您将无法为 .mask-banner
使用 position: absolute;
,因为它会将其从文档流中移除,而其他元素不会注意它。您可以通过以下方式解决此问题:
- 将
hover
检测移动到父级.quick-banner
- 在流程中保持
.mask-banner
(不要使用position: absolute;
) .quick-banner
悬停时隐藏.main-banner
的内容
要保持动画完整,您将无法使用 display: none;
隐藏 mask-banner
,因此您可以使用 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 fiddle : http://jsfiddle.net/xtfzgrcm/2/
关于javascript - 根据高度div向上移动div给他,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30131076/