我在这里尝试的是当鼠标悬停在这个div上时实现一个过渡效果。
一切都很好,只有过渡效果没有出现。我尝试使用过渡属性
是
这是我目前拥有的:
一切都很好,只有过渡效果没有出现。我尝试使用过渡属性
transition: all
、transition: opacity
和transition: background
,但都无效。是
display
属性在起作用。因为当我将它移除时,它有效。那么我该如何解决呢?显然,我要保留display
属性,因为它适用于所有浏览器(新旧)。这是我目前拥有的:
.matrix-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0,0,0); /* fallback */
background: rgba(0,0,0,0);
color: #fff;
display: none;
-webkit-transition: background 2s;
-o-transition: background 2s;
-moz-transition: background 2s;
transition: background 2s;
}
a:hover .matrix-overlay {
display: block;
background: rgba(0,0,0,0.5);
}
我不介意使用不透明度、背景或其他方式来控制淡入淡出的效果,只是不知道还有什么别的方法可用。
display
属性,但如果那是唯一的方法,那我想我必须这样做。 - Rowan