-1

我有一个具体的问题。这是我的 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 悬停时，我需要在其旁边显示具有类 level-2 的元素。断点是 2 级类数组的结尾。

预期结果显示每一个li带有文本 Element 1 Level 2

问题：

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

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

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

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

4

2 回答 2

0

您可以在 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;
}
于 2015-04-22T13:10:45.897 回答
0

通常，人们会将较低级别的项目放在 li-item 内的单独 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áafter 另一个项目的.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;}
于 2015-04-22T13:20:05.110 回答