在悬停<a> element?

Question

I'm trying to hide/show a <ul> that is outside of the parent element of the <a> that will be hovered.

.dropdown {
  display: none;
}

.shows:hover + .dropdown {
  display: block;
}

<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li><a href="#" class="shows">SEASON</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>
<ul class="dropdown">
  <li><a href="#">SHOWS</a></li>
  <li><a href="#">EVENTS</a></li>
</ul>

The adjacent selector doesn't seem to work and I can't seem to make anything else work. Solutions?

Answer 1

您使用的是adjacent sibling selectors +，.shows和.dropdown不是同一父级的子级，而是相邻的子级。您必须将.dropdown元素移至<li>所在的.shows。

.dropdown {
  display: none;
}

.shows:hover+.dropdown {
  display: block;
}

<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li>
    <a href="#" class="shows">SEASON</a>
    <ul class="dropdown">
      <li><a href="#">SHOWS</a></li>
      <li><a href="#">EVENTS</a></li>
    </ul>
  </li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

Answer 2

对于流程中 next 的sibbling元素，它只能 。

您可以使用<nav>和普通<a>重新设置为列表项（<li>）来保持连贯的HTML5结构，该结构也可以实现所需的样式效果：

.dropdown {
  display: none;
}

.shows:hover~.dropdown {
  display: block;
}
/* make those <a> look like <li>s resetting major default li rules */
.navmenu>a {
  display: list-item;
  margin-left: 2em;
}

<nav class="navmenu">
  <a href="#">HOME</a>
  <a href="#" class="shows">SEASON</a>
  <a href="#">ABOUT</a>
  <a href="#">CONTACT</a>
  <ul class="dropdown">
    <li><a href="#">SHOWS</a></li>
    <li><a href="#">EVENTS</a></li>
  </ul>
</nav>

使用~而不是+，因为要显示的元素不是正确的，而是在之后的某个地方。

Answer 3

您可以使用CSS第三方 ax 库。

以下是两个例子：

选择祖先元素的下一个兄弟：

使用^（选择祖先）和+（选择下一个兄弟）

.dropdown {
display: none;
}

.shows:hover ^ .navmenu + .dropdown {
display: block;
}

<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li><a href="#" class="shows">SEASON</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

<ul class="dropdown">
  <li><a href="#">SHOWS</a></li>
  <li><a href="#">EVENTS</a></li>
</ul>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

选择远程元素：

使用\（选择远程元素）

.dropdown {
display: none;
}

.shows:hover \ .dropdown {
display: block;
}

<ul class="navmenu">
  <li><a href="#">HOME</a></li>
  <li><a href="#" class="shows">SEASON</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

<ul class="dropdown">
  <li><a href="#">SHOWS</a></li>
  <li><a href="#">EVENTS</a></li>
</ul>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

进一步阅读 ax 选择器：

http://www.rounin.co.uk/projects/axe/axe2.html