如何在悬停时在 div 内容的边距之间显示 div 作为覆盖答案

【问题标题】：How to display a div as overlay in between the margin of the div contents on hover如何在悬停时在 div 内容的边距之间显示 div 作为覆盖
【发布时间】：2022-04-03 09:17:02
【问题描述】：

我正在为我的 div 内容添加叠加层。

作为其中的一部分，我创建了一个带有 4 个框（A、B、C、D）的 .main div。

当我将鼠标悬停在主 div 上时，我想像这样在我的主 div 上显示一个 div 作为叠加层，如图所示。

我在主 div 中的内容之间设置了一个边距：10px（所有 flex 布局）。

如何在 div 之间的空白处显示覆盖 div？

附上我的 JSFiddle 示例：

.main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  padding-bottom: 10px;
    padding-top: 10px;
}

.main div {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 1 1 30%;
        height: 100px;
        margin: 10px;
        box-sizing: border-box;

}
/* .main:hover {
  background: red;
} */

.overlay-main {
  display: none;
}

.main:hover + .overlay-main {
  display: flex;
  background: red;
  position: absolute;
  height: 500px;
  width: 500px;

}

<div class="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
</div>

<div class="overlay-main">
<span>add row</span>
<span>add column</span>
</div>

https://jsfiddle.net/deepakpookkote/ears2zyg/14/

附加的图像是我在悬停时的预期结果

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

您可以使用：:before 和 :after：

div.main:hover div::before{
  content: "add column";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  transform: translate(-100%, -50%);
  word-break: keep-all;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.8em;
  letter-spacing: -2px;
}

div.main:hover div::after
{
  content: "add row";
  display: block;
  position: absolute;
  top: 100%;
  width: 100%;
  font-size: 0.9em;
  text-align: center;
}

这是一个工作示例：jsFiddle

【讨论】：