目标下一个兄弟悬停与顺风

Question

我试图隐藏一个元素，直到它的前一个兄弟元素悬停在上面，在css(或scss)中，它看起来像这样:

.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}

<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>

我如何使用顺风实现这一点?

Answer 1

您实际上并没有试图瞄准代码中的兄弟元素，而是试图瞄准子元素。当你只想显示一个子菜单下拉菜单时，这是一个非常简单的过程。

只需将group添加到悬停触发器(。菜单项链接)和group-hover:[some-display-class]给孩子。这样，当父元素(或其本身)悬停时，子元素将改变其显示属性。

你应该改变你的标题，而且我建议你不要在类名上使用顺风。有关使用顺风CSS的推荐方法，请参见提取组件。当然，你可以随心所欲地使用它，但如果你想使用SCSS和类似的类，你最好使用普通的旧CSS。

例子与结构:

<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>

顺风游戏示例https://play.tailwindcss.com/dFc2zlmqDA