Fullpage.js - ドットナビゲーションスタイル

Question

私はFullpage.JSのドットナビゲーションのスタイルを設定しようとしていますが、何か問題があります。

は、ここに私のコードのバイオリンだと私は現在持っているもの：HEREを見られるように、私は、「いっぱい」効果を追加しようとしている https://jsfiddle.net/my9tqcho/

。

はここで効果のソースコードです：

.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を設定することです。

疑似要素のスタイリングは、ソースコードに似ています。

乾杯。