css - CSS3 隐藏跨度过渡

Question

当您将鼠标悬停在图像上时，我试图使隐藏的跨度淡入。我不能让它过渡。

.thumb {
margin-top: 10px;
margin-right: -3px;
}

.thumb span {
display: none;
}

.thumb:hover span {
display: block;
position: absolute;
padding: 55px 0 0 0;
text-decoration: none;
text-align: center;
background-color: #ff6600;
opacity: .8;
width: 300px;
height: 95px;
font-size: 17px;
font-family: Candara;
text-shadow: 2px 2px 2px #000;
transition-property: opacity, background-color;
transition-duration: 25s ease-in;
}

我的css有什么问题？

Answer 1

“.thumb:hover span”它说，您的 span 标签必须是“.thumb”类标签的子标签。但是您不能将“span 放入图像标签”。您可以使用 jquery 或将“.thumb”类放入 span 的父级，以便父级悬停触发您想要的效果。您还可以对 image 和 span 有一个共同的父级。