CSS网格布局内按钮hover效果指针响应不准确问题咨询

问题1、2触发原因 #

问题1：悬停20%按钮时5%按钮同时触发hover；问题2：悬停「Select Tip %」文字区域时5%按钮触发hover

• 两个问题均由HTML结构错误导致：你将所有小费按钮、「Select Tip %」文字全部包裹在了<label>标签内部
  • 未显式设置for属性的<label>会默认关联内部第一个可交互表单元素，也就是你的5%按钮
  • 只要鼠标处于<label>的覆盖范围内，都会触发关联的5%按钮的交互状态，包含hover效果

问题3触发原因 #

问题3：Reset按钮完全无法触发hover效果

• 由CSS优先级冲突导致：
  • Reset按钮的默认样式选择器.result-section .reset是2个类选择器，权重为20
  • 通用按钮hover选择器button:hover是1个标签选择器+1个伪类选择器，权重为11
  • 低权重的hover样式被高权重的默认样式覆盖，导致hover效果无法生效
• 额外冗余问题：你给所有<button>添加了专属<a>标签的href属性，属于无效属性，建议删除。

修复方案 #

修复前两个问题 #

将包裹小费选择区域的<label>标签替换为普通<div>标签即可。如果需要给「Select Tip %」文字做表单标签关联，单独对文字设置带for属性的<label>，关联对应输入框id即可，不要将所有按钮都包裹在<label>内。

修复Reset按钮hover问题 #

单独给Reset按钮设置高优先级的hover样式，示例代码如下：

.result-section .reset:hover {
  background-color: hsl(185, 41%, 84%);
  /* 可选：hover时取消透明度，效果更明显 */
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Đức Seven