悬停时更改表格的内容？

Posted 2023-03-06

【中文标题】悬停时更改表格的内容？

【英文标题】：Change table's contents on hover?

【发布时间】：2015-09-30 17:51:31

【问题描述】：

我有如下表：

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

看起来像：

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

内容从“房间”变为 3 个不同的链接，重定向到不同的页面。

图像保持在中间，不透明度较高。

喜欢：

【问题讨论】：

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

【参考方案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>