Question

我正在尝试为链接上的鼠标悬停创建一个三角形，但我的三角形始终显示在链接下方的一个角落。有人能告诉我确切的问题在哪里吗？

 #navcontainer a:hover::after {
            background: white;
            border: solid black;
            border-width: 1px 1px 0 0;
            bottom: -5px;
            content: ' ';
            display: block;
            height: 10px;
            left: 32px;
            position: absolute;
            width: 10px;
            z-index: 99;
            -webkit-transform: rotate(-45deg);
            -webkit-transform-origin: 50% 50%;
        }

Answer 1

您要做的是将悬停效果应用于LI而不是A.

#navcontainer li:hover::after {

而不是

#navcontainer a:hover::after {

您还需要将LI的显示类型更改为内联块并为其指定高度（减去UL的填充顶部），最后是相对于包含箭头的位置。

    #navcontainer ul li {
        display: inline-block;
        height:35px;
        position:relative;
    }

现在悬停。我们知道它是10px宽，所以要集中定位我们做一个计算，50％的宽度 - 5px（箭头宽度的一半）;

    #navcontainer li:hover::after {
        background: white;
        border: solid black;
        border-width: 1px 1px 0 0;
        bottom: -5px;
        content: ' ';
        display: block;
        height: 10px;
        left: calc(50% - 5px);
        position: absolute;
        width: 10px;
        z-index: 99;
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: 50% 50%;
    }

现在应正确定位箭头。

Answer 2

您需要将position:relative添加到#navcontainer ul li a

这样，:after中定义的三角形就会知道父元素的位置。

 #navcontainer ul li a {
     text-decoration: none;
     padding: .2em 1em;
     color: #fff;
     position:relative; /* this is important for correct positioning */
}

<强> Updated FIDDLE

Answer 3

<强> CSS：

#navcontainer a:hover::after {
   /*background: white;*/ /* this was the problem */
   background: blue;      /* now full triangle */
    border: solid black;
    border-width: 1px 1px 0 0;
    bottom: -5px;
    content: ' ';
    display: block;
    height: 10px;
    left: 32px;
    position: absolute;
    width: 10px;
    z-index: 99;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
}

对齐活动链接的css三角形

3 个答案: