Question

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

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

1）当我将鼠标放在列表上时，元素的宽度会像它应该的那样扩展，但是其中一个元素会被推到它的位置，我想因为我将它设置为绝对值，但我不确定还有什么方法。

2）当我关闭鼠标时，似乎所有元素都不合适。

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

以下是代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

当您在悬停时提供列表项override func collectionView(_ collectionView: JSQMessagesCollectionView!, didTapMessageBubbleAt indexPath: IndexPath!) { if let indexPathTapped = indexPathTapped, indexPathTapped == indexPath { self.indexPathTapped = nil } else{ indexPathTapped = indexPath } var paths = [IndexPath]() let itemsCount = collectionView.numberOfItems(inSection: 0) for i in indexPath.item...itemsCount - 1 { paths.append(IndexPath(item: i, section: 0)) } let context = JSQMessagesCollectionViewFlowLayoutInvalidationContext() context.invalidateItems(at: paths) UIView.animate(withDuration: 0.25) { self.collectionView?.collectionViewLayout.invalidateLayout(with: context) self.collectionView?.layoutIfNeeded() } }时，将其从文档流中删除。这意味着其他列表项甚至不知道它存在，因此它们占据了悬停项的原始空间。这就是你获得转变的原因。

如果不对代码进行大量重组，则需要在列表项目悬停时补偿丢失的空间。

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

这是一个例子（仅在第一个列表项上）。

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;
}

css悬停列表与定位

1 个答案: