CSS中的:hover属性可以让用户在鼠标悬停在特定元素上时触发样式改变。但是,有时候我们希望延迟一段时间后才触发这种样式效果。这时候该怎么办呢?/* 延迟1秒后触发:hover */ .elem:h
CSS中的:hover属性可以让用户在鼠标悬停在特定元素上时触发样式改变。但是,有时候我们希望延迟一段时间后才触发这种样式效果。这时候该怎么办呢?
/* 延迟1秒后触发:hover */ .elem:hover { transition-delay: 1s; } /* 延迟0.5秒后触发:hover */ .elem:hover { transition-delay: 0.5s; }
上面的代码使用了CSS3的transition属性,其中transition-delay属性可以设置延迟时间,让:hover样式在鼠标悬停后一定时间才生效。
这个属性的值可以是秒数或者毫秒数。如果需要延迟2秒,则代码如下:
/* 延迟2秒后触发:hover */ .elem:hover { transition-delay: 2s; }
总之,使用transition-delay属性可以轻松实现CSS中:hover的延迟效果,让页面更加优美。
粉丝
0
关注
0
收藏
0