使用 CSS3“过渡”。奇怪的是,我可以成功地操纵top 和background-color values、duration 和delay。我还可以操纵颜色 值。但是,无论我在其中输入什么数字,我都无法为color 操纵duration 或delay。
代码如下。这里的结果是 top 和 background-color 在 1s 内完成了它们的变化,并且 color 立即变化(而不是超过 0.5s 延迟 1s ).
HTML:
<div class="episode">
<span class="vidsliderprep"></span>
<span class="vidslider">
<strong>TITLE</strong>
Description.</span>
</div>
CSS:
.vidslider {
display: block;
position: absolute;
top: 108px;
left: 0;
width: 100%;
height: 120px;
background-color: rgba( 51, 51, 51, 0.4);
font-family: 'Gafata', sans-serif;
font-size: 15px;
color: #FFF;
text-shadow: 1px 1px 0px #000;
padding: 0 10px;
transition: top 1s ease, background-color 1s ease, color 0.5s ease 1s;
z-index: 99;
}
.vidsliderprep:hover + .vidslider {
top: 30px;
background-color: rgba(51, 51, 51, 0.8);
}
.vidslider strong {
display: block;
font-size: 16px;
font-weight: bold;
}
.vidsliderprep:hover + .vidslider strong {
color: #F60;
}
非常感谢您的帮助!
最佳答案
因为它是<strong>
您希望更改的颜色,您需要将过渡添加到该元素而不是父元素。 transition-property
不被继承,所以 <strong>
没有过渡,因此颜色变化是即时的。
所以添加如下规则:
.vidslider strong {
transition: color 0.5s ease 1s;
}
如果不再需要,则从父级中删除该部分。
关于CSS3 过渡持续时间/延迟不适用于颜色属性,所有其他工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22128192/