Question

我创建了一个表格列表。当用户悬停第一个包含3个点编辑和删除选项的单元格时，会显示透明背景。

当内容单行时，一切都很好。

问题是当有更多内容时。叠加的高度不会调整。我已经尝试了top: 0; bottom: 0; height: 100% .action它涵盖了整个表格。

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 1

希望这会对你有所帮助。

使用: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>

Answer 2

@Tushar ..我注意到表格的底线，div边框永远不会在悬停时更新。fiddle example

.tCell:hover .menu:before, .tCell:hover .menu:after, .tCell:hover .menu { background: #000; }

在第一个单元格悬停时覆盖表格单元格

2 个答案: