CSS Dotstyle導航問題

Question

我工作的這個網頁，希望實現在右側dotstyle導航：

http://aliantesolution.it/chi_new.php

爲了做到這一點，我已經使用這個工具：http://tympanus.net/Development/DotNavigationStyles/

該鏈接是在點上滾動時出現的標誌，但我需要該鏈接作爲點本身，因爲對用戶來說更直觀。有人知道我該怎麼做？

我只是試圖改變代碼爲

<a href="#link><li>caption</li></a> 

這樣我獲得工作作爲一個鏈接點，但沒有標誌。

非常感謝！

Answer 1

完成它，我把李元素放在A中，並使用屬性「title」作爲工具提示。代碼如下解釋：

<div class="dotstyle"> 
         <ul> 
          <a title="chi" class="tooltip" href="#chisiamo"> 
          <li title="chi"></li> 
          </a> 
          <a title="organizzazione" class="tooltip" href="#organizzazione"> 
          <li title="organizzazione"></li> 
          </a> 
          <a title="etica" class="tooltip" href="#etica"> 
          <li title="etica"></li> 
          </a> 
          <a title="mission" class="tooltip" href="#mission_but"> 
          <li title="mission"></li> 
          </a> 
         </ul> 
    <div> 

    .dotstyle ul { 
    width: 9px; 
    position: fixed; 
    right: 70px; 
    top:45%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    cursor: default; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    z-index:50; 
} 

.dotstyle li { 
    border: 2px solid #FD4F00; 
    border-radius: 50%; 
    z-index: 1; 
    position: relative; 
    display: block; 
    float: left; 
    margin: 10px 0; 
    width: 8px; 
    height: 8px; 
    cursor: pointer; 
} 
.dotstyle a { 
    text-decoration: none; 
} 

.tooltip{ 
    display: inline; 
    position: relative; 
} 

.tooltip:hover li:after{ 
    position:absolute; 
    background: #FD4F00; 
    bottom: 26px; 
    color: #fff; 
    content: attr(title); 
    top: auto; 
    bottom: -82%; 
    right: 370%; 
    padding: 5px 15px; 
    z-index: 98; 
    font-weight: 900; 
    text-transform: uppercase; 
    font-size: 11px; 
} 

.tooltip:hover li:before{ 
    border: solid; 
    border-color: transparent; 
    border-left-color: #FD4F00; 
    border-width: 6px; 
    bottom: -20%; 
    content: ""; 
    left: -270%; 
    position: absolute; 
    z-index: 99; 
    -webkit-transition: opacity 0.3s ease; 
    transition: opacity 0.3s ease; 
}