Question

将鼠标悬停在第一个li或元素上以显示其余的li元素时出现问题。只有当我将鼠标悬停在ul上时，它才会起作用，但如果我将鼠标悬停在链接附近，它会显示li元素，因为它是块级元素。

如何将工作悬停在elemet而不是ul

上

这就是我现在所拥有的：

HTML：

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

CSS：

li a {
    text-decoration: none;
    display: none;
}

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

ul:hover a {
    display: block;
}

Answer 1

使用general sibling selector ~选择第一个列表项的所有兄弟姐妹。通过将列表项浮动到左侧（元素的宽度是内容的宽度），并清除浮动以打破该行，可以避免块级100％问题。

li a {
  text-decoration: none;
  display: none;
}

li {
  float: left;
  clear: left;
}

li:first-child a {
  display: block;
}

li:first-child:hover~li a {
  display: block;
}

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Answer 2

将ul设置为内联块，以便在悬停线（行）

时不会触发悬停

ul {
  display: inline-block;
  list-style: none;
}

li a {
  text-decoration: none;
  display: none;
}

li:first-child a{
  display: inline-block;
}

li:hover ~ li a {
  display: inline-block;
}

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

将鼠标悬停在元素上并显示li元素

2 个答案: