为什么Bootstrap5按钮CSS悬停效果不生效-css教程-PHP中文网

根本原因是选择器权重不足、加载顺序错误或状态样式缺失；需确保自定义css在bootstrap之后引入，按.btn.btn-primary:hover等高特异性写法覆盖，同时成套处理:hover、:focus、:disabled等五种状态。

为什么bootstrap5按钮css悬停效果不生效

不是你写错了，而是选择器权重不够、加载顺序不对，或者漏掉了 focus/active 等配套状态。

为什么 `.btn:hover` 写了却没反应

常见现象是加了 .btn:hover { background: #ff6b6b; }，但悬停时颜色完全不变。根本原因不是代码写错，而是 Bootstrap 的 CSS 加载顺序或选择器特异性更高——比如它用的是 .btn.btn-primary:hover 这类复合选择器，而你只写了 .btn:hover，权重不够，被覆盖。

确保自定义 CSS 文件在 Bootstrap CSS 之后引入（<link> 标签顺序不能颠倒）
别偷懒只写 .btn:hover，复制 Bootstrap 原始结构：比如改主按钮就写 .btn.btn-primary:hover，改 outline 就写 .btn.btn-outline-secondary:hover
Bootstrap 5.3+ 引入了 :where()，部分规则权重为 0，此时 .btn:hover 反而容易生效；但老版本必须靠提升特异性
用浏览器开发者工具检查 computed styles，看哪条 background-color 被划掉、被谁覆盖

`:focus` 样式不是 `:active`，别配错状态

很多人以为点击按钮时的蓝边阴影来自 :active，其实 Bootstrap 的“激活态视觉反馈”主要靠 :focus 或 :focus-visible 实现——尤其在表单连续操作中，按钮点击后仍保有焦点，你看到的就是 focus 样式。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

修改焦点环别只动 outline，它不支持圆角、难对齐；优先用 box-shadow，例如：.btn:focus { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); }
:focus 和 :hover 可能同时生效（比如鼠标移入后点击不松手），这时要确认两者颜色是否冲突；必要时加 .btn:hover:focus 单独控制叠加态
深色模式下，rgba(13, 110, 253, 0.25) 在暗背景上可能太淡，需提高 alpha 值或换色
禁用 autofocus 或 tabindex 不当可能导致 focus 样式无法触发，先检查按钮能否通过 Tab 键获得焦点

Hover 和 Focus 必须成套覆盖，漏一个就割裂

只改 .btn:hover 而不碰 .btn:focus，会导致鼠标悬停和键盘聚焦样式不一致；只改常态背景却不调 .btn:disabled，禁用按钮文字就会糊在背景里看不清。

五种状态必须统一处理：:hover、:focus、:focus-visible、:active、:disabled
:active 在桌面端常因未聚焦而不触发，建议给按钮加 tabindex="0" 或确保它是原生可聚焦元素（如 <button></button>）
Bootstrap v5.3+ 用 box-shadow 模拟按下态，会覆盖你写的背景变化，需显式重置：.btn:active { background-color: ... !important; box-shadow: none; }
移动端 :active 持续时间极短（约 100ms），肉眼难察觉，不建议单独依赖它做核心反馈