悬停时查看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>