CSS : 悬停显示列表的所有 li 项

Question

我有一个 ul 列表（包含 3 个 li 项目），其中只显示第一个项目。

我的代码很简单，如下：

ul {
  list-style-type: none;
  border: solid #000000 1px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  float: left;
}

/*Hidding all the li item :*/
ul li {
  display: none;
}

/*But display only the 1st li item :*/
ul li.visible {
  display: block;
}

<ul>
  <li class="visible">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我想在鼠标光标位于第一项时显示所有 li 项。

你有想法吗？

Answer 1

你可以使用:hover伪class:

ul:hover > li {
  display: list-item;
}

ul {
  list-style-type: none;
  border: 1px solid;
  margin: 0;
  padding: 0;
  float: left;
}

/* Hide all the list items */
ul > li {
  display: none;
}

/* But display the .visible ones, and
   all list items when list is hovered */
ul > li.visible, ul:hover > li {
  display: list-item;
}

<ul>
  <li class="visible">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS : 悬停显示列表的所有 li 项

CSS : Displaying all li item of a list with hover

css

list

hover