jquery - 在具有显示属性 table-row 的 div 上显示一个 div

Question

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

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'>出现但它将行中的所有元素移动一个单元格。请帮助我。

Answer 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