Question

我想执行一项操作，当我将鼠标悬停在图像上时，会显示下拉菜单。

以下代码可以正常使用。

HTML，CSS：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我的问题是为什么我无法使用#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

Answer 2

就像添加使用悬停作为显示菜单的唯一方式不是非常用户友好。如果您不使用鼠标，则无法与菜单进行交互。即使您使用鼠标也很难进行交互，因为只要鼠标没有实际悬停，菜单就会关闭。

我建议尝试其他方法或者添加一些JavaScript来改善可访问性。

CSS：为什么不能使用img：hover来显示下拉菜单

2 个答案: