悬停第一个单元格时覆盖 table 个单元格
Overlay on table cell on hover of first cell
我已经创建了一个 table 列表。当用户将鼠标悬停在第一个带有 3 个点的单元格时,Edit 和 Delete 选项将显示,下方是透明背景。
当内容在单行时,一切都很好。
问题是当有更多内容时。叠加的高度不调整。我试过top: 0; bottom: 0; height: 100%
到.action
它覆盖了整个table。
body {
margin: 0
}
.table {
display: table;
width: 100%;
border-bottom: 1px solid #ccc
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 2;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
left: 0;
right: 0;
margin-top: -19px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
希望对您有所帮助。
使用 :before
覆盖单元格,并使用 ~
运算符定位单元格。我有同样的要求。我就是这样处理的。
body {
margin: 0
}
.table {
display: table;
width: 100%;
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
position: relative
}
.tRow:last-child .tCell {
border-bottom: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow .tCell:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.9);
top: 0;
left: 0;
display: none;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 3;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 4;
left: 0;
right: 0;
margin-top: -19px;
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
display: block;
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
@Tushar ..我注意到 table 的底线,div 边框永远不会在悬停时更新.. fiddle example
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000;
}
我已经创建了一个 table 列表。当用户将鼠标悬停在第一个带有 3 个点的单元格时,Edit 和 Delete 选项将显示,下方是透明背景。
当内容在单行时,一切都很好。
问题是当有更多内容时。叠加的高度不调整。我试过top: 0; bottom: 0; height: 100%
到.action
它覆盖了整个table。
body {
margin: 0
}
.table {
display: table;
width: 100%;
border-bottom: 1px solid #ccc
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 2;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
left: 0;
right: 0;
margin-top: -19px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
希望对您有所帮助。
使用 :before
覆盖单元格,并使用 ~
运算符定位单元格。我有同样的要求。我就是这样处理的。
body {
margin: 0
}
.table {
display: table;
width: 100%;
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
position: relative
}
.tRow:last-child .tCell {
border-bottom: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow .tCell:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.9);
top: 0;
left: 0;
display: none;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 3;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 4;
left: 0;
right: 0;
margin-top: -19px;
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
display: block;
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
<a href="#">Edit</a> |
<a href="#">Delete</a>
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>
@Tushar ..我注意到 table 的底线,div 边框永远不会在悬停时更新.. fiddle example
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000;
}