CSS伪类:hover如何实现按钮悬停效果_使用:hover控制背景和文字颜色-css教程-PHP中文网

CSS伪类:hover如何实现按钮悬停效果_使用:hover控制背景和文字颜色

P粉602998670

发布： 2025-11-26 20:09:54

原创

733人浏览过

:hover伪类用于定义鼠标悬停时的样式，通过.button:hover设置背景色和文字颜色变化，并结合transition实现平滑过渡，增强按钮交互体验。

css伪类:hover如何实现按钮悬停效果_使用:hover控制背景和文字颜色

按钮的悬停效果是网页交互中常见且实用的设计，利用CSS伪类 :hover 可以轻松实现鼠标指针移入时改变背景色和文字颜色。这种方式无需JavaScript，仅通过纯CSS即可增强用户体验。

什么是 :hover 伪类？

:hover 是一种CSS伪类，用于选择用户将鼠标指针悬停在元素上的状态。它可以应用于任何HTML元素，但最常用于按钮、链接等可交互元素上，用来提供视觉反馈。

基本语法与用法

使用 :hover 的语法非常简单：在选择器后加上 :hover，然后定义悬停时的样式。

button:hover {
  background-color: #0056b3;
  color: white;
}

登录后复制

完整示例：按钮悬停变色

下面是一个完整的HTML与CSS结合的例子，展示如何实现按钮在悬停时同时改变背景和文字颜色。

立即学习“前端免费学习笔记（深入）”；

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

266

查看详情

<button class="btn">点击我</button>

<style>
.btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
  color: #fff;
}
</style>

登录后复制

说明：