css中是鼠标放上去改变颜色

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中可以用:hover这个伪类来实现鼠标悬停的效果,比如当鼠标放在一个链接上时,可以改变链接的颜色、背景色、边框颜色等等。a:hover { color: #FF0000; background-

CSS中可以用:hover这个伪类来实现鼠标悬停的效果,比如当鼠标放在一个链接上时,可以改变链接的颜色、背景色、边框颜色等等。

a:hover {
  color: #FF0000;
  background-color: #FFFFFF;
  border: 1px solid #FF0000;
} 

上面的代码表示,当鼠标悬停在a标签上时,文本颜色会变成红色,背景色会变成白色,边框会变成红色实线。

同样,当鼠标悬停在一个按钮或图片上时,也可以使用:hover来改变它们的样式。比如:

button:hover {
  background-color: #00FF00;
  color: #FFFFFF;
}

img:hover {
  border: 2px solid #000000;
} 

上面的代码分别表示,当鼠标悬停在一个按钮上时,背景色会变成绿色,文本颜色会变成白色;当鼠标悬停在一张图片上时,边框会变成2像素的黑色实线。

鼠标悬停效果是一种很简单但又很实用的CSS技巧,它可以让页面更加生动、有趣。在设计网站时,应该充分利用这个技巧来提升用户体验。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中是鼠标放上去改变颜色

粉丝

0

关注

0

收藏

0

已有0次打赏