时间戳

首页 > 解决方案 > 兄弟姐妹的孩子在悬停时影响兄弟姐妹

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

问题描述

将鼠标悬停在锚点上时，我试图显示子菜单。尝试过.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>

标签： htmlcss

解决方案

您必须更改 HTML 结构，因为无法仅使用 CSS 访问父元素。例如，将您的子菜单移动为菜单项的后代。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>

推荐阅读