在菜单项悬停时创建菱形

Question

我有一个菜单项，当将鼠标悬停在它上面时，它会下拉一个橙色框。

.menu > li > a:hover:after {
    position: absolute;
    left: 0px;
    border-style: solid;
    border-color: transparent;
}

但是我试图在下拉框下方实现钻石的效果。

我在此处看到链接此 [网站][4] 的帖子，我尝试使用 diamond:after 方法，但结果很差。我已经评论了需要编辑的 css 部分，以供快速参考。如果有人可以帮忙。

Answer 1

1) 在您的 CSS 中，没有声明 :after 伪元素 (.menu > li > a:hover:after {/* your css */})。 例如：

.menu > li > a:hover:after {
    content: ""; /* empty content */
    position: absolute;
    bottom: -50px; /* position 50px below the bottom of the menu link */
    left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 60px; /* diamond has 60px to the left and to the right of the midpoint, so the menu item should be 120px width */
    border-top: 50px solid #FF6E0D;
}

此方法需要您指定菜单项的宽度，因为您希望菱形横跨链接的整个底部。 （使用左/右border-width's。）

2) 要使用此方法，您应该将position: relative; 添加到.menu > li > a 声明中，因为:after 伪元素需要它来定位自身。

Answer 2

您可以为此使用伪元素，并在悬停时“移动”它：

div {
  height: 50px;
  width: 100px;
  background: orange;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid orange;
  top: 0;
  left: 0;
  transition: all 0.6s;
  z-index:-1;
}
div:hover:before {
  top: 100%;
}

<div>Option</div>

Answer 3

我使用:after 伪元素来添加箭头。过渡看起来并不好，因为两者都是单独动画的。如果你想让它顺利的话，你必须在那里挖一点。但这至少使箭头出现在正确的位置，这看起来确实是您问题的重要部分。然后你只需使用hover 伪元素将显示设置为阻止。

.menu > li > a:after {
  content: "";
  position: absolute;
  display: none;
  top: 160px;
  left: 0px;
  width: 0;
  height: 0;
  border-left: 62px solid transparent;
  border-right: 62px solid transparent;
  border-top: 60px solid #FF6E0D;
}

.menu > li > a:hover:after {
  display: block;
}