我正在尝试为悬停在链接上创建一个三 Angular 形,但我的三 Angular 形总是显示在链接下方的一个 Angular 上。谁能告诉我确切的问题在哪里?
#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%;
}
最佳答案
您要做的是将悬停效果应用到 LI 而不是 A。
#navcontainer li:hover::after {
代替
#navcontainer a:hover::after {
您还需要将 LI 的显示类型更改为 inline-block 并为其指定高度(减去 UL 的 padding top),最后指定包含箭头的相对位置。
#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%;
}
箭头现在应该正确定位。
关于html - 为事件链接对齐 css 三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22012991/