懸停在筆劃的特定短劃線上

我想使用 css、html 和如果需要 js 創建以下評級系統：

當用戶將滑鼠放在圓形筆劃的特定破折號上時，它會用特定顏色填充所有先前的破折號。現在我已經做了以下事情：

* {
  background-color: blue;
}

.progress-ring__circle {
  stroke-dasharray: 25 6;
}

<svg
   class="progress-ring"
   width="120"
   height="120">
  <circle
    class="progress-ring__circle"
    stroke="grey"
    stroke-width="10"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
</svg>

問題是我不知道如何檢測用戶將滑鼠放在哪個破折號上。有沒有辦法使用 JS 或 CSS 來做到這一點？

uj5u.com熱心網友回復：

一種方法是繪制帶有多個路徑的圓圈，在每個路徑上添加滑鼠懸停時的事件偵聽器

let paths = Array.from(document.querySelectorAll("#progress-circle .small"));
paths.forEach(function(path) {
  path.addEventListener('mouseover', function (event) {
    var target = event.target || event.srcElement;
    target.setAttribute('style', 'stroke: blue');
    document.getElementById('percentValue').textContent = target.dataset.percent;
    
    paths.forEach(function(previousPath) {
     if (parseInt(previousPath.dataset.percent) <= parseInt(target.dataset.percent)) 
     {
        previousPath.setAttribute('style', 'stroke: blue');
     } else {
        previousPath.setAttribute('style', 'stroke: grey');
     }
    });
  });
});

    * {
    }

    .progress-ring__circle {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:hover {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:nth-child(2){
        stroke: #f00; 
        position: relative;
        z-index: 1;

        
        
    }

<svg style="stroke:black; fill:none; stroke-width:2" width="400" height="400" id="progress-circle">
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="1"
        d=" M 236 105 A 100 100 288 0 1 279 133" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="2"
        d=" M 286 141 A 100 100 324 0 1 304 190" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="3"
        d=" M 305 200 A 100 100 0 0 1 292 250" />
     <path  
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="4"
        d=" M 286 259 A 100 100 36 0 1 246 291" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="5"
        d=" M 236 295 A 100 100 72 0 1 184 298" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="6"
        d=" M 174 295 A 100 100 108 0 1 131 267" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="7"
        d=" M 124 259 A 100 100 144 0 1 106 210" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="8"
        d=" M 105 200 A 100 100 180 0 1 118 150" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="9"
        d=" M 124 141 A 100 100 216 0 1 164 109" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="10"
        d=" M 174 105 A 100 100 252 0 1 226 102" />
</path>
<text id="percentValue" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0</text>    
 </svg>

標籤：

上一篇：從復選框獲取值并將它們發送到輸入文本

下一篇：如果子元素中不存在任何元素，則隱藏父元素