在具有显示属性 table-row 的 div 上显示 div答案

【问题标题】：display a div over a div with display property table-row在具有显示属性 table-row 的 div 上显示 div
【发布时间】：2015-08-12 00:25:39
【问题描述】：

我正在尝试以表格格式放置一些数据。我想将数据放入 div 中，但也要格式化，所以我在 div 上使用了 display:table-row。另外，当有人将鼠标悬停在 div(<div class='hover'>) 上时，我希望能够在表格行 div(<div class='row'>) 上显示带有选项的 div。

CSS

.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.row {
width: 100%;
display: table-row;
}
.column {
display: table-cell;
vertical-align: middle;
}
.hover {
width: 100%;
display: none;
z-index: 5;
position: absolute;
height: 100%;
background-color: #fff;
opacity: 0.3;
}

HTML

<div class='table'>
    <div class='row'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'></div>
        <div class='column'>".$row['id']."</div>
        <div class='column'>".$row['room']."</div>
        <div class='column'>".$row['name']."</div>
        <div class='column'><img src='' width='80' height='80'></div>
        <div class='column'>".$row['total']."</div>
        <div class='column'>".$row['current']."</div>
    </div>
</div>

jQuery

$('.content').bind({
                mouseenter: function(){
                    $('.hover').each(function(){
                        $(this).show();
                    });
                },
                mouseleave: function() {
                    $('.hover').each(function(){
                        $(this).hide();
                    });
                }
            });

问题是当我将鼠标悬停在 <div class='row'> ， <div class='hover'> 出现，但它将行中的所有元素移动一个单元格。请帮帮我。

【问题讨论】：

今天第三次回答这个问题了。 您不能将元素绝对定位在表格单元格中。对于不是表格单元格但具有display: table-cell 并因此表现的元素也是如此i> 喜欢表格单元格。 表格单元格中的内容不能通过任何 CSS 方式“离开”单元格。
请提出替代方案，如何保持数据格式不变，但在此选项上显示一个 div。
停止用 CSS 模仿表格，也不要使用真实的表格。
您的代码存在的另一个问题是<div class="hide"> 没有display: table-cell，但由于其父级有display: table-row;，因此邀请浏览器解释<div class="hide">，就好像它是一个表格单元格一样.
你为什么不首先使用真正的 HTML <table>？因为有人告诉你“这些天你不再使用桌子了”？

标签： jquery html css

【解决方案1】：

而不是 CSS 表格，也许是 flexbox 允许这种交互。

$('.content').bind({
  mouseenter: function() {
    $('.hover').each(function() {
      $(this).show();
    });
  },
  mouseleave: function() {
    $('.hover').each(function() {
      $(this).hide();
    });
  }
});

.row {
  display: flex;
  text-align: center;
}

.column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items:  center;
}

.row.header .column {
  border:1px solid lightblue;
  background: rgba(0,0,255,0.5);
  padding: 1em;
}

.row.content .column {
  border:1px solid lightgreen;
  background: #bada55;
}

.content {
  position: relative;
}

.hover {
  width: 100%;
  display: none;
  z-index: 5;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,.3);
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='table'>
      <div class='row header'>
        <div class='column'>ID</div>
        <div class='column'>Room</div>
        <div class='column'>Name</div>
        <div class='column'>Photo</div>
        <div class='column'>Deposit Money</div>
        <div class='column'>Balance</div>
    </div>
    <div class='row content'>
        <div class='hover'> I'M AN OVERLAY</div>
        <div class='column'>ID</div>
        <div class='column'>ROOM</div>
        <div class='column'>NAME</div>
        <div class='column'><img src="http://lorempixel.com/output/people-q-c-80-80-6.jpg"/></div>
        <div class='column'>TOTAL</div>
        <div class='column'>CURRENT</div>
    </div>
</div>

Codepen Demo

【讨论】：

非常感谢，你救了我:)