在悬停时更改表的内容？

Question

我有如下表所示的表格：

<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”中的内容上时，会发生以下更改。

1. 内容从“会议室”更改为3个不同的链接，这些链接会重定向到不同的页面。

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

喜欢：

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;