Question

当我将鼠标悬停在每个项目下时，我希望显示一个三角形。到目前为止它是有效的（即使我真的不明白如何）但我的问题是我也有底部显示相同的三角形... 我不明白为什么，我无法摆脱它。任何启发都将非常感激，这是我的代码

.wrapper_icons {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}
.wrapper_icons li {
  border-bottom: 4px solid black;
  flex: 3;
  margin-right: 20px;
}
li:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: solid transparent;
  margin-left: -11px;
  border-width: 11px;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.wrapper_icons li:hover {
  cursor: pointer;
  cursor: hand;
}
.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}
.sink:hover {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

<ul class="wrapper_icons">
  <li class="sink">Lorem ipsum</li>
  <li class="sink">Lorem ipsum</li>
  <li class="sink">Lorem ipsum</li>
</ul>

Answer 1

after伪元素位置设置为绝对值，因此它将从其第一个父元素位置override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if segue.identifier == "MySegue", let destinationViewController = segue.destination as? DetailViewController destinationViewController.object = selectedObject } }开始。因此，请将position: relative添加到列表项：

position: relative

Answer 2

您可以使用伪元素创建透明三角形，并在将return悬停在fun main(args: Array<String>) { val nums = arrayOf(1, 2, 3) val numsPlusOne = nums.map { it -> val r = it + 1 r } // numsPlusOne = [2, 3, 4] }

时更改其颜色

li

li:hover:after

Css Triangle显示在页面底部

2 个答案: