Question

当我将鼠标悬停在锚点上时，我试图显示一个子菜单。尝试过.expand:hover ~ .submenu或.expand:hover + .submenu，但它们似乎不起作用，因为锚点不是子菜单的直接同级。我必须将鼠标悬停在该特定的li锚上。是否有HTML / CSS的方式来做到这一点。我知道我可以使用JS进行排序，但是有HTML / CSS方法吗？

.menu {
  display: block;
}

.menu-item {
  list-style-type: none;
}

.menu-item a {
  text-decoration: none;
  font-size: 30px;
  font-weight: bolder;
}

.submenu {
  width: 100px;
  height: 30px;
  background: yellow;
  display: none;
}

.expand:hover ~ .submenu {
  display: block;
}

<ul class"menu">
  <li class="menu-item expand"><a href="">EXPAND\/</a></li>
</ul>

<div class="submenu">
  <p>submenu</p>
</div>

Answer 1

由于无法仅使用CSS访问父元素，因此您必须更改HTML结构。例如，将子菜单移动为菜单项的后代。 JS并不是一个坏主意，但是...

.menu {
  display: block;
}

.menu-item {
  list-style-type: none;
}

.menu-item a {
  text-decoration: none;
  font-size: 30px;
  font-weight: bolder;
}

.submenu {
  width: 100px;
  height: 30px;
  background: yellow;
  display: none;
}

.expand:hover ~ .submenu {
  display: block;
}

<ul class"menu">
  <li class="menu-item expand"><a href="">EXPAND\/</a></li>
  <div class="submenu">
    <p>submenu</p>
  </div>
</ul>

兄弟姐妹的孩子影响悬停时的兄弟姐妹

1 个答案: