我有一个带图片的 strip ，我想将鼠标悬停在它们上面，并且图片下方会弹出带有图片内容的文本。
我认为 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>最佳答案
display 属性无法转换。请改用 visibility 并使用适当的选择器。这个链接应该解释更多关于悬停时影响其他元素的信息:How to affect other elements when a div is hovered
此外，下面的解决方案
.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>关于html - 悬停时查看 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40320324/