悬停时查看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，并使用适当的选择器。此链接应详细说明影响悬停时的其他元素：How to affect other elements when a div is hovered

另外，下面的解决方案

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;