[分享]css中hover延迟时间

CSS中的:hover属性可以让用户在鼠标悬停在特定元素上时触发样式改变。但是，有时候我们希望延迟一段时间后才触发这种样式效果。这时候该怎么办呢？/ 延迟1秒后触发:hover / .elem:hov...

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的延迟效果，让页面更加优美。