我在 div:hover
上显示的图像底部有标题。然而,
div:hover 上显示的跨度会立即出现,尽管它具有过渡属性。
在 chrome 的开发工具中检查元素后,似乎过渡已正确应用于元素,但效果仍然是即时的。我不确定问题出在哪里,但我希望仅使用 css 来实现这种效果。
请在此处查看图片示例:
http://jsfiddle.net/agconti/Am244/3/
html:
<div>
<img src="http://placekitten.com/g/200/300" alt="">
<span>Im a caption</span>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
-webkit-transition: all 1.25s ease-out;
-moz-transition: all 1.25s ease-out;
transition: all 1.25s ease-out;
}
span {
position: relative;
bottom: 1.4em;
display: block;
color: white;
background: black;
opacity: 0.7;
text-align: center;
display:none;
-webkit-transition: all 1.25s ease-out;
-moz-transition: all 1.25s ease-out;
transition: all 1.25s ease-out;
}
div:hover span {
display: block;
}
最佳答案
显示
不是 supported property对于过渡。但是,您可以为此使用 opacity
:
span {
position: relative;
bottom: 1.4em;
display: block;
color: white;
background: black;
text-align: center;
/* display:none;*/
opacity: 0;
-webkit-transition: all 1.25s ease-out;
-moz-transition: all 1.25s ease-out;
transition: all 1.25s ease-out;
}
div:hover span {
opacity: 1;
/*display: block;*/
}
jsFiddle
关于html - 在悬停时将过渡应用于 div 中的跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20227139/