css伪类图片悬停延时 |改变span的css样式

img:hover {
border: 2px solid red;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

但是，这种直接悬停效果有时会显得过于突兀，缺乏自然的过渡效果，因此大家可以使用CSS3中的transition属性来为图片添加延时渐变效果：

img:hover {
border: 2px solid red;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: all 0.3s ease-in-out;
}

在这个例子中，大家设置了border和box-shadow的过渡效果，时长为0.3秒，缓动函数为ease-in-out。这样，在鼠标悬停时，图片将会在0.3秒内逐渐出现红色边框和阴影效果，不会像之前那样突兀。

除了all参数外，大家还可以使用border、box-shadow等属性名称来针对单个属性添加过渡效果。