Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js :

https://i.sstatic.net/pQP79.png

My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintaining functionality. So far, I have completed the following code snippets:

* {
  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>

The challenge now lies in detecting which section of the dash the user's cursor is on. Is there a way to achieve this using JS or CSS?

javascripthtmlcss

Answer №1

One approach is to create a circle using multiple paths and adding an event listener on mouseover to each path.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble modifying a nested object array within a treeview component in Reactjs

Thanks for your help in advance! Question: I'm having trouble updating a nested object of an array in a treeview using Reactjs. Please refer to the code and sandbox link below: https://codesandbox.io/s/cocky-leakey-ptjt50?file=/src/Family.js Data O ...

javascriptreactjsreact-hooksreact-state-managementnested-object

Verification of custom data type validation

I am puzzled by the behavior of this custom type state: interface DataType { [key: string]: string;} const [data, setData] = React.useState<DataType>({}); When I attempt to execute console.log(data === {}) It surprisingly returns false. Why ...

javascriptreactjstypescript

Dealing with JWT management in the absence of Cookies

After doing some research on JSON Web Token (which is a new concept to me), I have learned about its secure mechanism for transmitting information between parties without the need for server Sessions. Currently, I am in the process of building a web app f ...

javascriptjavajsonrestcookies

When the mouse hovers over, include a fade-in effect for the image

I am working with two overlapping images and have successfully implemented a function to display the second image on mouse hover. However, I am struggling to incorporate a CSS transition property for a smoother image transition effect. Currently, when the ...

htmlcssreactjsanimationhover

What is the Next.js equivalent of routing with rendering capability for nested component paths?

I am new to Next.js and so far have been loving the experience. I'm a bit stuck on how to achieve the equivalent of the following code in Next.js These are all client-side routes that render nested components on the user page. The value of ${currentP ...

javascriptreactjsreact-routernext.js

Is it considered acceptable to retrieve the action payload in mapDispatchToProps in a React/Redux setup?

In my MediaUpload component, I have a mapDispatchToProps function that handles file uploads. When a file is added, the onChange handler triggers two actions: creating new media entries for the files and updating the form data in the state with the generate ...

javascriptreactjsredux

Issues with React - Material UI Menu functionality

I'm encountering an issue with the menu/menu item component from material ui when trying to render it based on a condition. Here is my code snippet... const AddSelectItemButton = () => { return ( <> <Fab ar ...

javascriptreactjsmaterial-ui

No data returned from Ajax GET request

Utilizing Ajax with JavaScript, I am processing data on a PHP page using the GET method. Is it possible to send data from the PHP page when the GET query is empty? My goal is to have a live search feature that filters results based on user input. When a us ...

javascriptphpajaxget

The issue with updating values in the jQuery UI datepicker persists

When using the jquery datepicker ui, you may notice that the value attributes of the associated html fields do not update immediately. For example: http://jsfiddle.net/4tXP4/ Check out this link for more details: http://jqueryui.com/demos/datepicker/al ...

javascriptjqueryjquery-ui

Looking to display the "loading....." message on a PHP page?

I am working on a PHP webpage where I need to implement the following features: 1. Upon clicking "Say Thanks", it should change to "Done!". 2. Simultaneously, I would like to trigger an action in the indexController. 3. While this action is happening, I wa ...

phpjavascriptajaxzend-frameworkaccordion

Is there a way to retrieve the height of a document using vh units in jQuery?

$(window).scroll(function() { $scrollingDiv.css("display", (($(window).scrollTop() / 100vh) > 0.1) ? "block" : ""); }); Is there a way to change the unit $(document).height()) > 0.1) to use 100vh instead? I'm still learning jQuery and would ...

javascriptjqueryviewport-units

JavaScript For Each loops are really starting to frustrate me

My issue seems to be straightforward. I am attempting to update a list of objects called localData with another list of objects that I received after making an AJAX request (referred to as data). The process involves using two loops, however, when I atte ...

javascriptjquery

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms

Having issues with the jQuery toggle functionality

var resultsList = $("#test"); resultsList.text("Hello. This is jQuery!"); var tB = jQuery("#toggleButton"); tB.on("click", function() { resultsList.toggle(400); }); The syntax appears to be correct as there are no errors reported in the browser cons ...

javascriptjquery

Adjust the Material UI Select component to accommodate the length of the label

Is there a way to automatically adjust the size of Material-UI's Select input based on the label? In the official demo, minWidth is added to the formControl element. However, I have multiple inputs and do not want to set fixed sizes for each one. Whe ...

cssreactjsmaterial-ui

Steps to seamlessly integrate puppeteer with an active Chrome instance or tab

Is there a way to connect puppeteer to an already open Chrome browser and control a specific tab? I believe it may involve starting Chrome with the --no-sandbox flag, but I am unsure of the next steps. Any assistance on this matter would be greatly apprec ...

javascriptnode.jsautomationpuppeteer

Accessing nested arrays and objects within JSON using Node.js

I'm in the process of developing an application that retrieves a JSON response from an API call using SONARQUBE. With node js, how can I extract the value of duplicated_lines from the following JSON object? I attempted the code below but it always r ...

javascriptarraysjsonnode.jsexpress

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

IntelliJ has removed the connect-flash plugin, preventing me from reinstalling it

Learning node.js is new to me and I encountered a strange issue. While working on implementing login functionality with passportjs, I faced an error where req.flash() was not functioning properly. Oddly enough, it was working fine yesterday when I used it ...

javascriptnode.jsexpressnpm

What is the reason for the neglect of this function's definition?

Is there a reason behind the error message I am receiving? TypeError: getStatusCode(...) is not a function This error occurs when I execute the following code: const getStatusCode = require('./getStatusCode') tmpStatus = await getStatusCode({url ...

javascriptnode.jsecmascript-6