html - 在悬停时将过渡应用于 div 中的跨度

标签 html css

我在 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/

相关文章:

javascript - 在 Mac 上的任何浏览器上使用此页面转换时,如何修复滚动发生两次?

javascript - HTML 下拉菜单无法正常工作

html - 滚动条出现在滑动菜单旁边

CSS Div 定位内容

html - 滚动时不显示样式

javascript - 通过 HTML javascript 随机播放音乐无法正常工作

css - Polymer paper-input 字体大小媒体查询问题

html - 如何解决 safari 中手写 html dingbat 字体大小问题

html - 如何强制列 div 与其行的高度相同?

html - 如何在html bootstrap 4中使col-md-3在右侧对齐