html - 悬停时查看 Div

Question

我有一个带图片的 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>

Answer 1

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>