Fullpage.js - 点导航样式答案

【问题标题】：Fullpage.js - Dot Navigation StylingFullpage.js - 点导航样式
【发布时间】：2016-11-01 16:28:01
【问题描述】：

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

这是我的代码和我目前拥有的代码： 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%;
}

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

【问题讨论】：

如果您有兴趣，请在 fullPage 中有similar effects available to buy。 “实心圆圈”与您正在寻找的非常相似。

标签： javascript jquery css fullpage.js

【解决方案1】：

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

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

伪元素样式类似于源代码。

干杯。

【讨论】：