悬停在笔划的特定短划线上

Question

我想使用 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 来做到这一点？

Answer 1

要做到这一点，一种方法是绘制带有多个路径的圆圈，在每个路径上添加鼠标悬停事件侦听器

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>