懸停時查看Div

Question

我有一條帶圖片的條，我想將它們懸停在它們上面，然后在圖片下方彈出帶有圖片內容的文字。

我認為CSS存在問題。 如果可以的話，也許也可以嘗試進行過渡。

這是CSS和HTML：

 .procat{ background-color: #555555; padding-top: 15px; padding-bottom: 15px; } .procat img{ margin-left: 20px; margin-right: 20px; } .procath{ display: none; transition: 1s; } .procath a.procath:hover{ display: block; transition: 1s; background-color:dimgrey; } 

 <div class="procat"> <a class="tb" href="ThunderBird"> <img width="100px" height="100px" src="pic/icons/phone.png"> </a> <a href="ZeroBook"> <img width="100px" height="100px" src="pic/icons/laptop.png"> </a> <a href="ProjectTime"> <img width="100px" height="100px" src="pic/icons/car.png"> </a> <div class="procath"> <h6> ThunderBird </h6> </div> </div> 

Answer 1

display屬性無法轉換。 請改用visibility ，也要使用適當的選擇器。 該鏈接應詳細說明如何影響懸停時的其他元素 ：懸停div時如何影響其他元素

另外，下面的解決方案

 .procat{ background-color: #555555; padding-top: 15px; padding-bottom: 15px; } .procat img{ margin-left: 20px; margin-right: 20px; } .procath{ visibility: hidden; transition: 1s; } .procat a:hover ~ .procath{ visibility:visible; transition: 1s; background-color:dimgrey; } 

 <div class="procat"> <a class="tb" href="ThunderBird"> <img width="100px" height="100px" src="pic/icons/phone.png"> </a> <a href="ZeroBook"> <img width="100px" height="100px" src="pic/icons/laptop.png"> </a> <a href="ProjectTime"> <img width="100px" height="100px" src="pic/icons/car.png"> </a> <div class="procath"> <h6> ThunderBird </h6> </div> </div>