CSS：img：hoverを使用してドロップダウンメニューを表示できない理由

Question

画像にカーソルを置くと、ドロップダウンメニューが表示されます。

以下のコードは正常に動作します。

HTML、CSS：私はアクションを実行するために#menu-icon:hoverを使用できない理由

.menu { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.menu .dropdown-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
.menu:hover .dropdown-menu { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <img src="http://sharpinsurance.ca/images/menu-collapse.png" id="menu-icon" alt="menu-icon" /> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#home">Account</a> 
 
    </li> 
 
    </ul> 
 
</div>

私の質問はありますか？この構造に基づいて

#menu-icon:hover .dropdown-menu { 
    display:block; 
} 

Answer 1

：

<div class="menu">  
<img src="icon.jpg" id="menu-icon" alt="menu-icon"></img> 
<ul class="dropdown-menu"> 
<li><a href="#home">Account</a></li> 
</ul> 
</div> 

/あなたが使用しているコンビネータセレクタが間違っていると次のようになります。

#menu-icon:hover + .dropdown-menu { 
display:block; 
} 

使用している.menu-iconと.dropdown-menuの間にスペースがあることを前提としていメニューは画像の子であり、ではありません。

メニューは次の兄弟であり、+コンビネータで選択されています。

The 30 CSS Selectors You Must Memorize

Answer 2

だけでメニューを表示するための唯一の方法として、ホバーを使用すると、非常にユーザーフレンドリーではないことを付け加えたいです。マウスを使用していない場合は、メニューと対話することはできません。また、マウスを使用している場合でも、マウスが実際にホバリングしないとすぐにメニューが閉じられるので、やり取りするのが難しい場合があります。

私は別のものを試してみたり、アクセシビリティを改善するためにJavaScriptを追加することをお勧めします。