时间戳

首页 > 解决方案 > 仅在悬停在列表内时才会显示的溢出

html - 仅在悬停在列表内时才会显示的溢出

问题描述

我一直试图让溢出框仅在将鼠标悬停在列表中文本的某个部分内时才显示。它有效，但由于某种原因，它使另一个 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>

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

标签： htmlcss

解决方案

您遇到的问题是以数字开头的 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

或者 - 您可以转义 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 值- 在这种情况下，数字以 0030 开头。

推荐阅读