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旁边显示元素。断点是二级类数组的结尾。

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

问题：

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

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

这需要像嵌套级别的下拉列表一样工作，但需要使用这种结构。

问题是我只需要用CSS或CSS3来解决这个问题。

Answer 1

您可以在CSS中使用〜选择器，就像在这个小提琴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表示

在悬停的.level-1项目之后的所有.level-2项目

下一个语句.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;}

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

2 个答案: