HTML/CSS导航栏悬停效果留存问题求助

这个问题用纯CSS就能轻松解决，完全不需要JavaScript条件语句~ 咱们先拆解问题根源，再给出修改方案：

问题出在哪？ #

你目前的文字透明效果是绑定在 <a> 标签自身的 :hover 状态上的（比如 #navbar li.nutr-icon > a:hover）。当鼠标从主项的 <a> 移到下拉菜单的子元素上时，<a> 标签不再处于悬停状态，文字的 opacity 就会恢复默认值，重新显示出来。但其实父级的 <li> 元素在鼠标停留在下拉菜单期间，仍然处于 :hover 状态，背景图是一直存在的，只是文字又叠在了背景图上面。

解决方案 #

把文字透明的触发条件从 <a> 标签的 :hover 改成父级 <li> 的 :hover 状态——也就是让父元素悬停时，直接控制它的子 <a> 标签变为透明。这样只要鼠标在父 <li> 的范围内（包括下拉菜单的所有子元素），文字就会一直保持透明，背景图也会持续显示。

修改后的CSS代码片段 #

把你原来的这些选择器：

#navbar li.home-icon > a:hover {
opacity: 0;
}
#navbar li.rout-icon > a:hover {
opacity: 0;
}
#navbar li.nutr-icon > a:hover {
opacity: 0;
}
#navbar li.abou-icon > a:hover {
opacity: 0;
}
#navbar li.cont-icon > a:hover {
opacity: 0;
}
#navbar li.phon-icon > a:hover {
opacity: 0;
}

替换成：

#navbar li.home-icon:hover > a {
opacity: 0;
}
#navbar li.rout-icon:hover > a {
opacity: 0;
}
#navbar li.nutr-icon:hover > a {
opacity: 0;
}
#navbar li.abou-icon:hover > a {
opacity: 0;
}
#navbar li.cont-icon:hover > a {
opacity: 0;
}
#navbar li.phon-icon:hover > a {
opacity: 0;
}

修改完成后，当你悬停主项（比如Nutrition），再把鼠标移到下拉菜单的Meals、Diet Plans等选项上时，Nutrition的文字会保持透明，背景图也会一直显示，完全符合你的需求~

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