Question

我有一个菜单项，当它悬停在它上面时，它会掉落一个橙色框。

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

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

我在这里发现了一个链接这个[网站] [4]的帖子，我试图使用diamond:after方法，但结果却没有结果。我评论了需要编辑的css部分，以便快速参考。如果有人可以帮忙。

Answer 1

1）在你的CSS中没有声明：在psuedo-element（.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的。）

2）要使用此方法，您应该将position: relative;添加到.menu > li > a声明中，因为：在psuedo-element之后需要它来定位自己。

Answer 2

您可以为此使用伪元素，并且＆＃39;移动＆＃39;它在悬停上：

＆＃13;

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

＆＃13;

<div>Option</div>

＆＃13;

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

在菜单项的悬停上创建菱形

3 个答案: