0
237
VistasPase el cursor sobre un guión particular de un trazo
Me gustaría crear el siguiente sistema de calificación usando css, html y, si es necesario, js:
Cuando el usuario coloca su mouse en un guión particular del trazo del círculo, llena todo el guión anterior con un color particular. Por ahora he hecho lo siguiente:
* { 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>El problema es que no sé cómo detectar en qué tablero tiene el mouse el usuario. ¿Hay alguna forma de hacer esto usando JS o CSS?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Para hacerlo, una forma es dibujar el círculo con varias rutas donde agrega en cada ruta un detector de eventos al pasar el mouse
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta