显示具有相同 class 的下一个元素，数组的断点结尾

Question

我有一个小问题。这是我的 HTML 结构：

<ul class="dropdown">
    <li class="level-1">Element 1 Level 1</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-2">Element 1 Level 2</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-1">Element 2 Level 1</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-2">Element 2 Level 2</li>
    <li class="level-1">Element 3 Level 1</li>
</ul>

现在，在 Element 1 Level 1 悬停时，我需要在其旁边显示 class level-2 的元素。断点是 level-2 数组的结尾 classes.

预期结果显示每个 li 文本元素 1 级别 2

问题：

li.level-1 + li.level-2 { display: block; }

是否只显示下一个元素，而不是level-2 class的每个元素。

这需要像具有嵌套级别的下拉菜单一样工作，但具有这种结构。

问题是我只需要用 CSS 或 CSS3.

来解决这个问题

Answer 1

您可以在 CSS 中使用 ~ 选择器，就像在 fiddle https://jsfiddle.net/nileshmahaja/7nhy0yvn/

中一样

CSS

ul li {
    display:none;
}

ul li:first-child {
    display:block;
}

ul li:hover ~ li.level-2 {
    display:block;
}

Answer 2

通常人们会将较低级别的项目放在 li 项目内的单独 ul 中。你给出的例子是非常糟糕的做法，因为只有人类才能弄清楚它实际上是一个较低的深度

但是您应该能够执行以下操作：

.level-2 {
    display:none;
}

.level-1:hover ~ .level-2 {
    display: block;
}

.level-1:hover ~ .level-1 ~ .level-2 {
    display: none;
}

~ 表示 此项之后的所有类似 x 的项 所以 .level-1:hover ~ .level-2 表示

all .level-2 items after a hovered .level-1 item

下一条语句 .level-1:hover ~ .level-1 ~ .level-2 用于隐藏带有 .level-2 的项目和另一个 .level-1 项目。

注意：这对您没有多大帮助，因为您永远无法到达较低深度的项目，因为当您悬停它们时它们会消失。

编辑：此外，这仅适用于相对较新的浏览器。

一个好的树标记应该是：

<ul>
  <li>
    <a>first level link</a>
    <ul>
      <li>
        <a>second level link</a>
      </li>
    </ul>
  </li>
</ul>

那么标记会更容易并且跨浏览器工作：

ul ul li {display:none;}
li:hover ul {display:block;}

显示具有相同 class 的下一个元素，数组的断点结尾

Display next elements with same class, breakpoint end of array

css

hover

drop-down-menu

nativecss