: hover伪类用于鼠标悬停时改变元素样式，语法为selector:hover { property: value; }，常用于链接变色、图片放大、显示隐藏内容等场景。例如通过.button:hover设置按钮悬停效果，结合transition实现平滑动画，还可与子元素选择器组合使用如.card:hover .card-title改变特定子元素样式，提升交互体验。
使用 CSS 的 :hover 伪类可以轻松实现元素在鼠标悬停时的样式变化。只需要在目标选择器后加上 :hover，并定义希望改变的样式属性即可。
:hover 可以附加在任何 HTML 元素的选择器后面，当用户将鼠标指针移到该元素上时，就会应用对应的样式。
selector:hover {
property: value;
}
例如，让一个按钮在悬停时背景变蓝：
.button:hover {
background-color: blue;
color: white;
}
以下是一些常见的使用方式：
立即学习“前端免费学习笔记（深入）”；
示例：给图片添加悬停效果
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
这里用了 transition 让变化更平滑，提升交互质感。
:hover 可以和其他选择器组合，实现更复杂的效果。比如鼠标悬停时，修改某个子元素的样式：
.card:hover .card-title {
color: red;
}
上面代码表示：当鼠标移到 .card 上时，其内部的 .card-title 文字变成红色。
基本上就这些。只要掌握结构和逻辑，:hover 非常实用且易于上手。关键是注意过渡动画和样式冲突，避免页面闪烁或响应迟钝。
以上就是如何用css :hover实现悬停样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
499
收藏
