我正在开发用于显示视频的 Web 界面。我创建了一个有 4 列的表。然后我添加了页眉和页脚栏。页眉栏用于显示视频名称,页脚栏用于添加播放、暂停和全屏按钮。当我将鼠标悬停在相关的 td 上时,应该相应地显示这些条。现在我只为一个 td 开发,并且页眉按预期工作,但页脚没有。下面我提到了我的代码。
.wrapper{
position: relative;
width: 80%;
}
.videocontent{
width: 50%;
height: 150px;
background-color: #78b5e9;
}
.videocontent .header {
position: absolute;
top: -50px;
left: 0px;
width: 50%;
height: 32px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
background: #1f1f1f;
z-index: 1;
display: none;
}
.videocontent .header .text {
float: left;
padding-left: 10px !important;
}
.videocontent .footer{
position: absolute;
bottom: -50px;
left: 0px;
width: 50%;
color: #ccc;
background: #1f1f1f;
z-index: 1;
display: none;
}
.videocontent:HOVER .header{
top: 0px;
display: block;
}
.videocontent:HOVER .footer{
bottom: 0px;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div>
<table class="wrapper">
<tr>
<td class="videocontent">
<div id="content1" ></div>
<div class="header" >[text]</div>
<div class="footer" ></div>
</td>
<td class="videocontent"><div id="content2" ></div></td>
</tr>
<tr>
<td class="videocontent"><div id="content3" ></div></td>
<td class="videocontent"><div id="content4" ></div></td>
</tr>
</table>
</div>
</body>
</html>
将位置指定videocontent
为相对然后它将起作用,否则您的页脚将位于最后一行的底部,tr
而页眉将位于top
第一行。不管td
你在哪个盘旋。
.wrapper {
position: relative;
width: 80%;
}
.videocontent {
width: 50%;
height: 150px;
background-color: #78b5e9;
position: relative;
}
.videocontent .header {
position: absolute;
top: -50px;
left: 0px;
width: 50%;
height: 32px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
background: #1f1f1f;
z-index: 1;
display: none;
}
.videocontent .header .text {
float: left;
padding-left: 10px !important;
}
.videocontent .footer {
position: absolute;
bottom: -50px;
left: 0px;
width: 50%;
color: #ccc;
background: #1f1f1f;
z-index: 1;
display: none;
}
.videocontent:HOVER .header {
top: 0px;
display: block;
}
.videocontent:HOVER .footer {
bottom: 0px;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div>
<table class="wrapper">
<tr>
<td class="videocontent">
<div id="content1"></div>
<div class="header">[text]</div>
<div class="footer">[footer]</div>
</td>
<td class="videocontent">
<div id="content2"></div>
</td>
</tr>
<tr>
<td class="videocontent">
<div id="content3"></div>
</td>
<td class="videocontent">
<div id="content4"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句