如何相对于跨度定位div？答案

【问题标题】：How to position div relatively to a span?如何相对于跨度定位div？
【发布时间】：2026-01-01 23:35:01
【问题描述】：

我在 div 中有一个大文本。在本文中，我希望能够将鼠标悬停在某些特定的单词上，这将在包含一些自定义 div 的单词下方显示一个 div。（与您在*中悬停链接的方式相同，链接文章的摘要将显示）。

有没有办法在纯 CSS（无 javascript）中做到这一点？

当我在跨度内添加一个具有相对定位的 div 时，它会拉屎。见下文。

我认为 Wikipedia 正在使用 JS 来做这件事。

.menu-hover:hover > div {
  display: block
}

.menu {
  position: relative;
  top:20px;
  display: none;
  background: red;
}

<div>
  <span>Blah blah...</span>
  <span class="menu-hover">Menu
     <div class="menu">menu items</div>
  </span>
  <span>Bluh bluh...</span>
</div>

【问题讨论】：

“当我在 span 中添加一个 div 时”——从编写有效的 HTML 开始。 div 不允许是 span 的后代。
@Quentin：好吧，我知道它不起作用，不是吗？那么问题就变成了——你是怎么做到的？
@d-b 仍然可以使用无效的 HTML。
@HerrSerker：我并不是特别想在跨度内做一个 div。但似乎在 span 元素上自定义工具提示是合理的做法。
@Pete：谢谢。带有 display: block 的跨度似乎也不起作用。它的行为方式与 div 相同

标签： html css positioning

【解决方案1】：

也许你想要这个？如果你想让下拉菜单做其他方式

.hidden-word{
  position:absolute;
  visibility:hidden;
  font-size:11px;
}

.word{
  display:inline-block;
}
.word:hover > .hidden-word{
  visibility:visible;
}

<div>
  <span>Blah blah...</span>
  <span class="word">some word
     <div class="hidden-word">Hidden word</div>
  </span>
  <span>Bluh bluh...</span>
</div>

【讨论】：

【解决方案2】：

.menu-hover {
  position: relative;
}

.menu-hover .menu-wrapper {
  position: absolute;
  left: 0;
  width: 100vh;
}

.menu-hover .menu {
  position: absolute;
  top: calc(1.2em);
  display: none;
  background: red;
}

.menu-hover:hover .menu {
  display: inline-block;
}

<div>
  <span>Blah blah...</span>
  <span class="menu-hover">Menu
    <span class="menu-wrapper">
      <span class="menu">
        <ul>
          <li>Item 1
          <li>Item 2
          <li>Item 3 which is a longer item
          <li>Item 4
        </ul>
      </span>
  </span>
  </span>
  <span>Bluh bluh...</span>
</div>

【讨论】：