html - 带定位的 CSS 悬停列表

Question

我的列表元素悬停时遇到一些 CSS 问题。

当我悬停时，似乎发生了两件事。

1)当我将鼠标悬停在列表上时，元素的宽度会像应有的那样扩展，但其中一个元素被插入其位置，我猜是因为我将其设置为绝对，但我不确定其他元素是什么绕过这个。

2)当我把鼠标拿开时，似乎所有元素都变得不合适了。

我想要的是能够将鼠标悬停在每个列表上，并使其随文本展开，并且不会移动任何其他元素。

代码如下:

.menu-right {
  right: 0
}
.icon-steeringWheel {
  background-color: red;
  width: 40px;
  height: 40px;
}
.visualiser-menu {
  display: flex;
  position: absolute;
}
.visualiser-menu ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.visualiser-menu ul li {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.visualiser-menu ul li .visualiser-menu-btn {
  background-color: #333333;
  color: white;
  width: 45px;
  height: 44px;
  padding: 11px;
  transition: all 0.3s ease 0s;
  font-size: 1.5rem;
  text-align: center;
  padding: 11px;
  display: inline-flex;
}
.visualiser-menu ul li .visualiser-menu-btn span {
  margin-right: 10px;
}
.visualiser-menu ul li .visualiser-menu-btn:hover {
  background-color: blue;
  position: absolute;
  right: 0;
  width: 230px;
}

<div class="visualiser-menu menu-right">
  <ul>
    <li><a class="visualiser-menu-btn" id="selectModel" href="#"><span class="icon-steeringWheel ui-"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
  </ul>
</div>

Answer 1

当您将列表项悬停在 position:absolute 上时，您会将其从文档流中删除。这意味着其他列表项甚至不知道它存在，因此它们占据了悬停项的原始空间。这就是你要转变的原因。

无需对代码进行大量重构，您需要补偿列表项悬停时丢失的空间。

一种方法是在悬停发生的同时定义列表项的高度。

这是一个示例(仅针对第一个列表项)。

.menu-right {
  right: 0;
}
.icon-steeringWheel {
  background-color: red;
  width: 40px;
  height: 40px;
}
.visualiser-menu {
  display: flex;
  position: absolute;
}
.visualiser-menu ul {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}
.visualiser-menu ul li {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* NEW */
  margin-bottom: 20px;
}
.visualiser-menu ul li .visualiser-menu-btn {
  background-color: #333333;
  color: white;
  width: 45px;
  height: 44px;
  padding: 11px;
  transition: all 0.3s ease 0s;
  font-size: 1.5rem;
  text-align: center;
  display: inline-flex;
}
.visualiser-menu ul li .visualiser-menu-btn span {
  margin-right: 10px;
}
.visualiser-menu ul li:first-child:hover {
  height: 65px;
}
/* NEW */

.visualiser-menu ul li:first-child .visualiser-menu-btn:hover {
  background-color: blue;
  position: absolute;
  right: 0;
  width: 230px;
}

<div class="visualiser-menu menu-right">
  <ul>
    <li><a class="visualiser-menu-btn" id="selectModel" href="#"><span class="icon-steeringWheel ui-"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a>
    </li>
  </ul>
</div>