时间戳

首页 > 解决方案 > 如何相对于跨度定位div？

html - 如何相对于跨度定位div？

问题描述

我在 div 中有一个大文本。在本文中，我希望能够将鼠标悬停在某些特定的单词上，这将在包含一些自定义 div 的单词下方显示一个 div。（就像您可以将链接悬停在维基百科中一样，链接文章的摘要将显示出来）。

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

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

我认为维基百科是用 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>

标签： htmlcsspositioning

解决方案

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

推荐阅读