Question

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

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

当我在相对位置的范围内添加一个div时，它会把床弄坏。见下文。

我认为Wikipedia正在使用JS做到这一点。

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

{{1}}

Answer 1

.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>

Answer 2

也许您想要这个吗？如果要制作下拉菜单，请使用其他方式

.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>

如何将div相对于跨度定位？

2 个答案: