Fullpage.js

Question

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

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

我正在尝试添加 "fill up" 效果，如 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 答案，但我似乎遗漏了什么，我无法弄清楚它是什么。

Answer 1

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

你想要做的是设置 overflow: hidden 和 box-shadow: inset 0 0 0 2px white 以便它允许这样的 'filled' 效果。

伪元素样式与源代码相似。

干杯。

Fullpage.js - 点导航样式

Fullpage.js - Dot Navigation Styling

javascript

css

jquery