悬停时更改表格的内容？答案

【问题标题】：Change table's contents on hover?悬停时更改表格的内容？
【发布时间】：2015-09-30 17:51:31
【问题描述】：

我有如下表：

<table border="1px" width= "900px" ; height="100px">
                <tr>
                    <td width="200px" height="100px" align="center" >
                     <p><img src="images/home.png"/></p>
                     <p>Room<p></td>
               </tr>
</table>

看起来像：

我想做的是当鼠标悬停在“td”中的内容上时，会发生以下变化。

内容从“房间”变为 3 个不同的链接，重定向到不同的页面。
图像保持在中间，不透明度较高。

喜欢：

【问题讨论】：

我注意到您的表格中没有<tbody></tbody>？

标签： html css html-table hover

【解决方案1】：

如果您想更改悬停时的元素内容，您需要使用 javascript 来执行此操作。但是，如果您想在悬停时显示其他内容，就像我在您的图像上看到的那样，您可以隐藏3 links 并在悬停时显示它们。示例：

table {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  text-align: center; 
}

td {
  position: relative;
  vertical-align: middle;
}

.default {
  position: relative;
  z-index: 0;
}

.show-hover {
  background: rgba(255,255,255, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

a {
  display: block;
}

td:hover .show-hover {
  visibility: visible;
  opacity: 1;
}

<table>
  <tr>
    <td>
      <div class="default">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUDQgbT9PFaERFaLbqP8sFsyq2r3sSYu6BtCj63z90tLEpALgo" />
        <p>Rooms</p>
      </div>
      <div class="show-hover">
        <div class="wrap">
          <a href="">Lorem</a>
          <a href="">Ipsum</a>
          <a href="">Dolor</a>
        </div>
      </div>
    </td>
  </tr>
</table>

【讨论】：