悬停时更改 table 的内容？

Question

我有 table 如下所示：

<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"中的内容上时，会发生如下变化

内容从 "Room" 更改为重定向到不同页面的 3 个不同链接。
图像保持在中间，不透明度较高。

赞：

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

悬停时更改 table 的内容？

Change table's contents on hover?

html

css

html-table

hover