html - 将鼠标悬停在另一个 div 上时使文本出现在 div 中

Question

我有一个“空”div，当我将鼠标悬停在某个元素上时，我想用文本填充它。我们悬停的每个元素的文本应该不同。

这是 code

.text-info{
  height: 50px;
  width: 200px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.economics{
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.economics:hover{
  background-color: grey
}
.workforce{
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.workforce:hover{
  background-color: grey
}

#economics, #workforce{
  display: none;
}

<div class="text-info">
  <p id="economics">blabla</p>
  <p id="workforce">blablabla</p>
</div>
<div class="economics"></div>
<div class="workforce"></div>

我只尝试使用 css，将 p 设置为 display: block 悬停在 .economics 或 .workforce 上时，没有结果。

非常感谢任何帮助，谢谢!

Answer 1

使用 css，您只能在悬停其父元素时显示元素，如下所示:

.economics:hover #economics{
    display: block;
}

如果 #economics 在 .economics 中，这将起作用。

在这种情况下，您可以向#economics 添加绝对位置，以便在视觉上位于 .text-info 持有者中。