Question

我正在尝试为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回答，但我似乎错过了一些内容，我无法弄清楚它是什么。

Answer 1

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

您要做的是设置overflow: hidden和box-shadow: inset 0 0 0 2px white，以便允许这样的＆＃39;填充＆＃39;效果。

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

干杯。

Fullpage.js - 点导航样式

1 个答案: