Question

我正在尝试在导航栏中的导航链接上添加悬停效果，使其成为突出显示的列表项上方的简单填充点。我似乎无法得到任何工作。我一直在尝试:before and :after css伪选择器。我确实使用border属性获得了一条线路。有没有一种简单的方法可以做到这一点。

HTML

<div class="navbar">
    <ul>
        <li class="active"><a href="#">link 1></a></li>
        <li><a href="#">link 2></a></li>
        <li><a href="#">link 3></a></li>
        <li><a href="#">link 4></a></li>
    </ul>
</div>

Answer 1

这是你需要的吗？

ul li:hover:before {
    content: "";
    position: absolute;
    top: -15px;
    background: red;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    left:calc(50% - 8px);
}

和小提琴。

http://jsfiddle.net/f7RrW/

在悬停时在导航列表元素上方添加点

1 个答案: