将元素悬停在其他元素上

Question

我有一个侧面导航。单击图标时，它将父div的宽度切换为完整内容。父级中带有的每个导航项都是一个带有一些支持文本和链接的div。当单击我的图标时，将应用class slimNav类，因此当我将鼠标悬停在特定模块上时，我希望该div扩展一点，添加一个背景，并位于周围的元素上方。但是发生的是悬停的项目下面的元素向上移动。

这是html

<div class="slimNav" data-bind="foreach: modules">
    <div class="modules" data-bind="click: showModuleNodes">
        <div class="block">
            <i data-bind="css: cssClass" class="fa-alignment"></i>
        </div>
        <div class="headertooltip">
            <span class="headertooltiptext" data-bind="text: name"></span>
        </div>

        <div class="tooltip">
            <span data-bind="text: name" class="header"></span>
            <ul class="tooltiptext" data-bind="foreach: nodes, visible: nodesVisible">
                <!-- ko template: hasChildren() ? "has-child-node" : "no-child-node" --><!-- /ko -->
            </ul>
        </div>
    </div>
</div>

css

.slimNav .modules:hover {
  position:absolute;
  left:0;
  z-index:10;
  background:green;
  width:205px;
  padding:5px;
}

这里是苗条模式

现在，当我将鼠标悬停时，注意到悬停的图像下方的元素如何向上滑动。

Answer 1

之所以发生这种情况，是因为您将图标绝对定位在悬停位置上，从而将元素从文档布局流程中移出了。这样可以释放图标占用的空间，从而导致下面的所有图标移入该新占用的空间。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

要解决此问题，您只需要确保图标不会从文档流中移出即可。

执行此操作的一种方法是，将鼠标悬停状态的图标复制如下：

.nav {
  display: inline-block;
}

.nav__item {
  cursor: pointer;
  position: relative;
}

.nav__item__hover {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  align-items: center;
  background: green;
  padding-right: 5px;
  display: none;
}

.nav__item:hover .nav__item__hover {
  display: flex;
}

.nav__item__hover svg {
  padding-right: 10px;
}

.nav__item__hover svg {
  fill: red;
}

<div class="nav">
  <div class="nav__item">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    <div class="nav__item__hover">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
      Fund Management
    </div>
  </div>
  <div class="nav__item">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    <div class="nav__item__hover">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
      Fund Management
    </div>
  </div>
  <div class="nav__item">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
    <div class="nav__item__hover">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
      Fund Management
    </div>
  </div>
</div>

Answer 2

将位置设置为If varArrayCol = Skills_Needed(i, 1) Then，而不是使用position: absolute。绝对不会再考虑周围的其他元素。