单选按钮本身不支持:hover伪类，必须通过关联的label实现悬停效果；推荐用label包裹input或用for/id绑定，再对label设置:hover样式，选中状态需结合:checked与相邻/兄弟选择器控制。
单选按钮 :hover
浏览器对原生 的样式控制极弱，绝大多数浏览器（Chrome、Firefox、Safari）**不支持对 input 元素本身设置 :hover 伪类效果**——即使写了，也基本无效。这不是你写错了，是规范限制。
真正能响应悬停的，必须是它旁边的可渲染元素，比如 。所以核心思路是：把视觉交互逻辑从 input 转移到包裹或关联它的 上。
用
这是兼容性最好、语义最清晰的做法。只要 input 在 label 内部，点击 label 就自动聚焦/选中对应 radio，且 label 支持完整 CSS 交互。
<label> <input type="radio" name="theme" value="light"> 浅色模式 </label> <label> <input type="radio" name="theme" value="dark"> 深色模式 </label>
然后给 label 加悬停样式：
label:hover {
background-color: #f0f5ff;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
}
- 确保
label是块级或 inline-block，否则 padding/margin 可能不生效 - 不要给
input设display: none后又忘了用for/id关联——那样会断开点击穿透 - 如果 label 内有图标或复杂结构，
label:hover会作用在整个标签区域，行为更可预期
用 for + id 关联时，悬停目标仍是
当 HTML 结构不允许包裹（比如 input 和 label 分开写），必须用 for 显式绑定。此时悬停依然只能作用于 label，但需注意选择器写法：
<input type="radio" name="size" id="size-s" value="s"><label for="size-s">小号</label>
对应 CSS：
label[for="size-s"]:hover {
color: #2563eb;
text-decoration: underline;
}
- 不能写
input:hover + label——input不响应 hover - 避免用
input:focus + label模拟“悬停”，那其实是聚焦态，不是鼠标移入 - 如果多个 radio 共享同一组样式，建议统一 class，比如
，再写.radio-option:hover
想高亮已选中的选项？得靠 :checked + 相邻/兄弟选择器
悬停是临时态，选中是持久态。如果你希望“当前选中的那一项在悬停时有额外强调”，需要组合两个状态：
label:hover,
input:checked + label {
background-color: #dbeafe;
}
<p>/<em> 选中且悬停时叠加效果 </em>/
input:checked + label:hover {
background-color: #a5b4fc;
font-weight: 600;
}</p>
这里依赖 input 和 label 的相邻顺序（input 在前，label 紧跟其后）。若结构是 label 在前，则改用 label:hover 和 input:checked ~ label（需确保 label 是 input 的后续兄弟节点）。
关键点：:checked 是作用于 input 的伪类，但它本身不可见；所有视觉反馈都得通过它关联的 label 来呈现——这点容易被忽略，导致写了 :checked:hover 这种无效组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
