我的導航欄菜單有這個問題。我希望在鼠標懸停時，每個條項都有一個效果，顯示在條項旁邊的圖片上。因此，當我指向條形項目時，它會在旁邊顯示一個圖像。 我的問題是，只有當我只指向圖片，而不是整個酒吧項目時，圖片才會顯示我。

這是我的代碼。如果能得到幫助，我將不勝感激。我知道問題一定在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;
}

<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>

您可以將限定符添加到CSS after :hover標簽中，這就是您在本例中需要做的。在您的實例中，您希望每次懸停時都顯示圖像。因此，該行的代碼如下所示:

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

這條線的意思是，當你懸停在。克里克，改變不透明度。導航標志。