Question

我一直试图让溢出框仅在将鼠标悬停在列表内文本的特定部分内时才会显示。它有效，但是由于某种原因，它使另一个li消失了。这是我的代码：

#firstid {
  text-decoration: underline;
  color: olivedrab;
}

#secondid {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#firstid:hover~#secondid {
  display: block;
}

<ol>
  <li>
    <a id="firstid">Text</a>
    <a id="secondid">Text</a>
  </li>
  <li>Text</li>
</ol>

它可以正常工作，但是在我的列表中应该消失的内容消失了。这可能是由于一些愚蠢的错误，但是我已经坚持了一段时间，无法在线找到答案。任何帮助将不胜感激（：

Answer 1

您遇到的问题是，以数字开头的ID选择器不是有效的 css选择器。我将它们更改为字母，并且可以正常工作。

#a {
  text-decoration: underline;
  color: olivedrab;
}

#b {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#a:hover~#b {
  display:block;
}

<ol>
  <li>
    <a id="a">Text</a>
    <a id="b">Text</a>
  </li>
  <li>Text</li>
</ol>

从技术上讲，这些ID是有效的HTML ID，但不是有效的CSS选择器。

有关更多详细信息，请参见此答案：

https://stackoverflow.com/a/31773673/1068446

或者-您可以escape the digits in your CSS：

#\31 {
  text-decoration: underline;
  color: olivedrab;
}

#\32 {
  display: none;
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

#\31:hover~#\32 {
  display:block;
}

<ol>
  <li>
    <a id="1">Text</a>
    <a id="2">Text</a>
  </li>
  <li>Text</li>
</ol>

\ 3 的解释它将下面的字符串转义到unicode value-在这种情况下，数字以0030开头。

仅在将鼠标悬停在列表中时才显示溢出

1 个答案: