CSS设置顶部导航hover效果异常仅部分按钮可触发求助

云上老周

2026-10-3

导航栏hover触发异常问题修复方案

问题根因

页面中设置了position: fixed的#container元素默认层级高于普通文档流中的导航栏，其实际交互区域覆盖了前几个导航项，你触发hover时实际选中的是上层的标题容器而非导航链接，因此出现部分导航项无法触发hover的现象：

位置靠后的SEARCH、CART未被覆盖，交互正常
CONTACT US仅部分区域被覆盖，因此仅右侧可触发hover
其余导航项完全被覆盖，完全无法触发hover

修复方案

任选其中一种即可解决问题：

方案1：调高导航栏层级

给.topnav添加相对定位和更高的层级，确保导航栏在页面最上层：

.topnav {
    overflow: hidden;
    font-family: "Cute Aurora Regular";
    background-color: transparent;
    border: #c9c7c7 0.1px solid;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;            
    border-left: none; 
    border-right: none; 
    /* 新增以下两行 */
    position: relative;
    z-index: 999;
}

方案2：禁用标题容器的鼠标交互

给#container添加属性，使其不响应任何鼠标事件，不影响显示的同时不会遮挡下层导航的交互：

#container {
    margin-left: 27px;
    margin-top: 41px;
    position: fixed;
    color: white;
    font-family: "Cute Aurora Regular";
    /* 新增以下一行 */
    pointer-events: none;
}