覆盖第一个单元格悬停的表格单元格 [英] Overlay on table cell on hover of first cell

查看：123
本文介绍了覆盖第一个单元格悬停的表格单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



当内容单行时，一切正常。

问题出在内容更多时。叠加的高度不调整。我试过 top：0;底部：0;高度：100％到 .action 它覆盖整个表格。 

  body {margin：0} .table {display：table;宽度：100％; border-bottom：1px solid #ccc} .tHead，.tRow {display：table-row; position：relative;}。tCell {display：table-cell;填充：5px;背景：#fff; border = 1px solid #ccc;}。tHead .tCell {background：#ccc;}。tRow：hover .tCell {background：＃f4f4f4; tRow：hover + .tRow .tCell {border-color：＃000;}。tRow .tCell：first-child {width：10px;光标：指针;不透明度：1} .menu {display：block; height：3px;宽度：3px;背景：#ccc;位置：相对; margin-left：5px;顶部：3px; z-index：2;}。menu：before，.menu：after {display：block; height：3px;宽度：3px;背景：#ccc;位置：绝对;内容：; top：-6px;}。menu：before {top：-12px;}。actions {display：none;位置：绝对;白色空间：nowrap; z-index：1;左：0;正确：0; margin-top：-19px;背景：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>名称< / div> < div class =tCell>年龄< / div> < div class =tCell>性别< / div> < div class =tCell>工作资料< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell>凯利< / div> < div class =tCell> 28< / div> < div class =tCell>女性< / div> < div class =tCell> Web Developer< / div> < / DIV> < div class =tRow hovered> < div class =tCell>< span class =menu>< / span> < span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Jack< / div> < div class =tCell> 32< / div> < div class =tCell>男性< / div> < div class =tCell> Java Developer< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Janaya< / div> < div class =tCell> 26< / div> < div class =tCell>女性< / div> < div class =tCell> .Net Developer< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Jim< / div> < div class =tCell> 24< / div> < div class =tCell>男性< / div> < div class =tCell> Full Stack Developer< / div> < / div>< / div>

解决方案



使用：之前来覆盖单元格上的使用〜运算符定位单元格。我有同样的要求。这是我如何处理它。


$ b

body {margin：0} .table {display：table; width：100％;}。tHead，.tRow {display：table-row; position：relative;}。tCell {display：table-cell;填充：5px;背景：#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：;位置：绝对;身高：100％;宽度：100％;背景：rgba（255,255,255,0.9）; top：0;左：0; tRow：hover + .tRow .tCell {border-color：＃000;}。tRow .tCell：first-child {width：10px;光标：指针;不透明度：1} .menu {display：block; height：3px;宽度：3px;背景：#ccc;位置：相对; margin-left：5px;顶部：3px; z-index：3;}。menu：before，.menu：after {display：block; height：3px;宽度：3px;背景：#ccc;位置：绝对;内容：; top：-6px;}。menu：before {top：-12px;}。actions {display：none;位置：绝对;白色空间：nowrap; z-index：4;左：0;正确：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>名称< / div> < div class =tCell>年龄< / div> < div class =tCell>性别< / div> < div class =tCell>工作资料< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell>凯利< / div> < div class =tCell> 28< / div> < div class =tCell>女性< / div> < div class =tCell> Web Developer< / div> < / DIV> < div class =tRow hovered> < div class =tCell>< span class =menu>< / span> < span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Jack< / div> < div class =tCell> 32< / div> < div class =tCell>男性< / div> < div class =tCell> Java Developer< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Janaya< / div> < div class =tCell> 26< / div> < div class =tCell>女性< / div> < div class =tCell> .Net Developer< / div> < / DIV> < div class =tRow> < div class =tCell>< span class =menu>< / span>< span class =actions> < a href =＃>编辑< / a> | < a href =＃>删除< / a> < /跨度> < / DIV> < div class =tCell> Jim< / div> < div class =tCell> 24< / div> < div class =tCell>男性< / div> < div class =tCell> Full Stack Developer< / div> < / div>< / div>

I have create a table listing. When user hover the first cell that is with 3 dots Edit and Delete option are displayed and below that there is a transparent background.

Everything is fine when content is in single line.

Issue is when there is more content. The height of overlay does not adjust. I have tried top: 0; bottom: 0; height: 100% to the .action it covers the whole 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>

解决方案

Hope this helps you.

Use :before for the overlay on the cell and target the cells using ~ operator. I had same requirement. This is how I handled it.

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>

这篇关于覆盖第一个单元格悬停的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆