带定位的CSS悬停列表

Posted 2023-03-07

【中文标题】带定位的CSS悬停列表

【英文标题】：css hovering lists with positioning

【发布时间】：2017-06-14 02:18:33

【问题描述】：

我在悬停列表元素时遇到了一些 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>

【问题讨论】：

另一个很好的 Stack Snippets 候选者：meta.***.com/questions/269754/…

【参考方案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>