有没有可能使用悬停伪类从一些文本中偏移20px的框？

Question

我只有一行文字：

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

当光标在文本“hover over here”上时，我会尝试弹出一个包含一些内容的框，我会尝试在css中完成所有操作。

因此，在我的css文件中，我有：

.tryHover:hover{

}

我想我明白了上面所做的，它允许我在光标位于文本“hover over here”上时更改文本的属性。例如改变背景色等。

但是我想做的是有一个盒子，当我悬停在它上面时，它会“弹出”，比方说文本下面20像素。

所以我想我应该创建一个box类，比如：

.box {             
   width: 
   height:
   border: 
}

但是我正在努力弄清楚是否有可能让那个框在单独使用CSS悬停在文本上时出现。

谢谢。

Answer 1

关键是嵌套你的. box（默认情况下显示：无设置）在. try Hover中，然后在. try Hover： 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>

Answer 2

您必须在

记住设置的父对象的位置：相对。方框div。

堆栈片段

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