是否可以使用悬停伪类从某些文本中偏移 20px 的框？

Question

我只有一行文字：

<p> this is some text <b class="tryHover">hover over here</b> </p>

当光标悬停在文本“悬停在此处”上时，我试图弹出一个包含一些内容的框，并且我试图在 css 中完成所有操作。

所以在我的 css 文件中我有：

.tryHover:hover{

}

我想我明白了上面的内容，当光标在它上面时，它可以让我更改文本“悬停在此处”的属性。例如更改背景颜色等。

但我想做的是有一个“弹出”的框，当我将鼠标悬停在文本下方 20 像素时。

所以我想我会创建一个像这样的盒子类：

.box {             
   width: 
   height:
   border: 
}

但我正在努力弄清楚是否可以在单独使用 CSS 将鼠标悬停在文本上时使该框出现。

谢谢。

Answer 1

您必须在<b> 标签内制作方框，并使用position:absolute 到.box 进行位置调整。

记得设置.box div的父级的position:relative。

堆栈片段

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 25px;
  display: none;
}

.tryHover {
  position: relative;
  display: inline-block;
}

.tryHover:hover .box {
  display: block;
}

<p> this is some text <b class="tryHover">hover over here<span class="box"></span></b>
</p>

Answer 2

关键是将.box（默认设置display:none）嵌套在.tryHover内，然后将display: block嵌套在.tryHover:hover .box样式块内：

.box {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  border: 1px solid gray;
  background: #f2f2f2;
  padding: 5px;
}

.tryHover {
  position: relative;
}

.tryHover:hover .box {
  display: inline-block;
}

<p>
  This is some text 
  <strong class="tryHover">hover over here
    <span class="box">Boxed text</span>
  </strong>
</p>