导航栏CSS问题：悬停菜单项时显示旁侧图片的故障排查

我开发导航栏菜单时遇到个问题：想实现鼠标悬停菜单项时，显示旁边的图片，但现在只有悬停图片本身时才显示，悬停整个菜单项没用。我试过用.klik:hover替换.nav-logo:hover, .bar-item:hover，但没解决。

现有代码 #

CSS

.bar-item {
    border-color:var(--light-lime);
    color: var(--light-lime);
    background-color:white;
        
    padding: 10px 10px;
    width: fit-content;
    display:block;
    float:left;
    text-align: center;
    text-decoration: none;
    opacity: 1;
}
.nav-logo {
    width: 25px;
    height: 25px;
    justify-content: center;
    padding: 1px;
    margin: auto;
    opacity: 0
}
.nav-logo, .bar-item {
    display:inline-flex;
}
.klik {
    display:inline-flex;
    vertical-align: baseline;
    text-align: left; 
}


.nav-logo:hover, .bar-item:hover {
    opacity: 1;
}

HTML

<div id="demo" class="dropdown-content">
    <div class="klik">
        <img class="nav-logo" src="images/favicon.png" alt="logo padáku">
        <a href="#pt_about" class="bar-item">about me</a>
    </div>
    <div class="klik">
        <img class="nav-logo" src="images/favicon.png" alt="logo padáku">
        <a href="#pt_studium" class="bar-item">study</a>
    </div>
    <div class="klik">
        <img class="nav-logo" src="images/favicon.png" alt="logo padáku">
        <a href="#pt_prace" class="bar-item">my work</a>
    </div>
    <div class="klik">
        <img class="nav-logo" src="images/favicon.png" alt="logo padáku">
        <a href="#para" class="bar-item">skydiving</a>
    </div>
</div>

问题修复方案 #

问题出在hover触发的目标上：你原来的规则只在鼠标直接悬停图片或文字链接时才改变透明度，但我们需要的是**悬停整个菜单项容器（.klik）**时，让里面的图片显示出来。

修正后的核心CSS规则 #

把原来的.nav-logo:hover, .bar-item:hover替换成下面的代码：

.klik:hover .nav-logo {
    opacity: 1;
}

完整优化后的CSS #

.bar-item {
    border-color:var(--light-lime);
    color: var(--light-lime);
    background-color:white;
        
    padding: 10px 10px;
    width: fit-content;
    display:block;
    float:left;
    text-align: center;
    text-decoration: none;
    opacity: 1;
}
.nav-logo {
    width: 25px;
    height: 25px;
    justify-content: center;
    padding: 1px;
    margin: auto;
    opacity: 0;
    transition: opacity 0.2s ease; /* 可选：添加平滑过渡动画 */
}
.nav-logo, .bar-item {
    display:inline-flex;
}
.klik {
    display:inline-flex;
    vertical-align: baseline;
    text-align: left;
    padding: 5px; /* 可选：扩大悬停区域，提升用户体验 */
}

/* 核心修正：悬停容器时显示图片 */
.klik:hover .nav-logo {
    opacity: 1;
}

说明 #

• 利用CSS后代选择器，当鼠标悬停在.klik父容器上时，自动选中内部的.nav-logo元素，将其透明度设为1，实现悬停整个菜单项时显示图片的效果。
• 给.klik添加padding可以扩大可触发悬停的区域，避免用户需要精准点击才能触发效果；添加transition属性能让图片的显示/隐藏更平滑，提升交互体验。

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