不能只改opacity是因为它会使整个元素（含图标和文字）变灰发虚，且ios safari点击反馈弱；正确做法是用rgba()调整背景色透明度，并加!important确保覆盖，同时为移动端补充:active状态。
Dropdown悬停背景为什么不能只改opacity
直接给.dropdown-item:hover加opacity: 0.7会导致图标变灰、文字发虚、iOS Safari点击反馈弱甚至失效——因为opacity作用于整个元素，包括SVG图标和文字，不是“背景透明”。真正要调的是背景色本身的透出程度。
正确改法：用rgba()控制background-color的alpha值
Bootstrap默认悬停背景是纯色（如#e9ecef），必须显式替换为带alpha通道的rgba()值，并确保覆盖生效：
- 写组合选择器，避免影响全局
.dropdown-item：.navbar .dropdown-item:hover或.dropdown-menu .dropdown-item:hover - 用
background-color: rgba(0, 0, 0, 0.05) !important替代background-color: #e9ecef，最后一位0.05即透明度（0=全透，1=不透） - 别漏掉
!important：Bootstrap 5 的.dropdown-item:hover规则权重高，不加很可能被覆盖 - 如果用了深色主题，对应改成
rgba(255, 255, 255, 0.1)并同步调整文字颜色
移动端悬停状态根本不存在，得单独处理点击态
触摸设备没有:hover，用户点按后不会触发该伪类，结果就是“悬停效果完全没反应”。必须主动定义点击反馈：
- 用
.dropdown-item:active或.dropdown-item:focus补上视觉变化 - 推荐写成：
.dropdown-item:active { background-color: rgba(0, 0, 0, 0.1) !important; } - 如果用
<button></button>标签，务必加type="button"，否则可能触发表单提交打断交互 - 避免依赖
transition: opacity——它在touch设备上无效，且PC端容易和focus状态冲突
滚动时悬停背景要不要同步变色
要，但CSS无法自动响应。因为.dropdown-menu是position: absolute，脱离文档流，其子元素.dropdown-item:hover不受window.scrollY影响。必须靠JS联动：
- 监听
scroll事件，给.navbar加.scrolled类 - 用更具体的选择器控制悬停态：
.navbar.scrolled .dropdown-item:hover { background-color: rgba(0, 0, 0, 0.1) !important; } - 别只写
.scrolled .dropdown-item:hover，否则可能误匹配到非导航栏内的下拉项（比如表单里的dropdown）
.dropdown-menu用了rgba(255, 255, 255, 0.95)，那:hover的rgba(0, 0, 0, 0.05)才合理；若菜单本身是纯白底，再设低alpha悬停色就会显得突兀。
