网站头部超链接无法识别、光标悬停无手型故障如何修复

问题根源 #

你的问题本质是层叠顺序覆盖，具体原因如下：

• #photo元素设置了position: relative，DOM结构写在#header之前，默认z-index为0
• 你没有给设置了position: absolute的#header配置更高的z-index，导致#photo完全覆盖在#header上方，你点击、hover的操作实际都作用在#photo上，自然触发不了链接效果
• 额外问题：绝对定位的#header没有显式设置top属性，位置会跟随前面980px高的#photo排布，和你预期的顶部显示位置不匹配；#header内部全是浮动子元素，存在高度塌陷问题

修复步骤 #

1. 修改CSS样式 #

你可以把#header标签上的内联style="position:absolute;"删掉，统一放到CSS中管理，避免样式冲突。调整#header样式如下，新增z-index、top属性，同时修复高度塌陷：

#header {
  width: 800px;
  padding-top: 20px;
  /* 替换原来的margin-left，用绝对定位的left更稳妥 */
  left: 550px;
  margin-right: auto;
  float: left;
  /* 新增以下三个属性 */
  position: absolute;
  z-index: 10; /* 只要大于#photo的默认0即可 */
  top: 0; /* 调整到页面顶部，可根据需要修改数值 */
  overflow: hidden; /* 清除内部浮动导致的高度塌陷 */
}

如果要统一所有菜单项的hover手型效果，可以新增通用样式：

#header a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
#header a:hover {
  /* 可自定义hover效果，比如加下划线 */
  text-decoration: underline;
}

2. 调整HTML结构（可选） #

你目前只有Oferta加了a标签，其他菜单项如果也需要跳转，补上对应的a标签即可。

修改后你就可以正常点击头部链接，hover时也会显示手型光标。

内容的提问来源于stack exchange，提问作者Kacper Wojtkiel