CSS：爲什麼不能使用img：hover來顯示下拉菜單

Question

我想執行一個動作，當我將鼠標懸停在圖像上時，將顯示下拉菜單。

下面的代碼工作正常。

HTML，CSS：

.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執行的操作？

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

選擇器/ Combinator的您使用的是不正確的，應該是：

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

.menu-icon之間的空間.dropdown-menu您使用的假設該菜單是圖像的子項，它不是。

該菜單是下一個兄弟，並與+組合子一起選擇。

The 30 CSS Selectors You Must Memorize

Answer 2

只是想補充一點，使用懸停以顯示菜單的唯一方法是不是很人性化。如果您不使用鼠標，則無法與菜單進行交互。即使您使用鼠標，也很難進行交互，因爲只要鼠標沒有真正懸停，菜單就會關閉。

我會建議嘗試別的或者可能會添加一些JavaScript來提高可訪問性。