javascript - Fullpage.js - 点导航样式

Question

我正在尝试为 Fullpage.JS 设置点导航样式，但我遇到了一些麻烦。

这是我的代码和我目前拥有的代码的 fiddle : https://jsfiddle.net/my9tqcho/

我正在尝试添加“填充”效果，如所见 HERE .

效果源代码如下:

.dotstyle ul {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
}

.dotstyle li {
    position: relative;
    display: block;
    float: left;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.dotstyle li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: 50%;
    background-color: #fff;
    background-color: rgba(255,255,255,0.3);
    text-indent: -999em;
    cursor: pointer; /* make the text accessible to screen readers */
    position: absolute;
}

/* Fill up */
.dotstyle-fillup li a {
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
    transition: background 0.3s;
}

.dotstyle-fillup li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 1px #fff;
    transition: height 0.3s;
}

.dotstyle-fillup li a:hover,
.dotstyle-fillup li a:focus {
    background-color: rgba(0,0,0,0.2);
}

.dotstyle-fillup li.current a::after {
    height: 100%;
}

到目前为止我找到了THIS来自 fullpage.js 的创建者的回答，但我似乎错过了一些东西，我无法弄清楚它是什么。

Answer 1

我对你的 jsfiddle 做了一个分支，让它在这里工作 https://jsfiddle.net/6z67g7v6/

您想要做的是设置overflow: hidden 和box-shadow: inset 0 0 0 2px white 以便实现这种“填充”效果。

伪元素样式就像源代码。

干杯。