更改懸停時的表格內容？

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並在懸停時顯示它們。例如：

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>