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

您使用的选择器/组合器不正确，应该是:

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

您使用的 .menu-icon 和 .dropdown-menu 之间的空格假定菜单是图像的子级，但事实并非如此。

菜单是下一个同级菜单，并使用 + 组合符进行选择。

The 30 CSS Selectors You Must Memorize