CSS过渡不适用于悬停
Posted
技术标签:
【中文标题】CSS过渡不适用于悬停【英文标题】:CSS Transition not working on hover 【发布时间】:2016-02-15 13:16:56 【问题描述】:我遇到了问题。当我将鼠标悬停在图像上时,会出现一个深色叠加层,但 CSS 过渡属性不起作用。
这里是html:
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
而 CSS 是:
.collection-category
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
.collection-category img
width: 100%;
max-height: 250px;
.collection_title
display: table-cell;
vertical-align: middle;
font-size: 28px;
.overlay_wrap
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
.overlay
display: none;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
.collection-category:hover>a>.overlay_wrap>.overlay
display: table;
height: 100%;
width: 100%;
这里是 JSFiddle
http://jsfiddle.net/cnbvoe32/
任何帮助将不胜感激。
提前致谢。
【问题讨论】:
【参考方案1】:这是因为您无法从 display: none
转换到 display: table
。
相反,您可以通过将初始显示设置为 table
以及 opacity: 0
然后转换为 opacity: 1
来转换 opacity
属性:
Updated Example
.overlay
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
.collection-category:hover>a>.overlay_wrap>.overlay
opacity: 1;
【讨论】:
感谢您的快速回复。该解决方案有效,但不是 100%。过渡仅适用于悬停,但不适用于悬停。在 hover out 时,文本会在左上角显示一段时间。 您可以在 JS 中使用onmouseover
和 onmouseout
。以上是关于CSS过渡不适用于悬停的主要内容,如果未能解决你的问题,请参考以下文章