Customizing hover effects to change the color of stars in a rating system

I am facing a challenging issue with my star rating system. Initially, I receive stars from CMS and assign them unique IDs.

When the page is not rated, it appears as follows:

<div class="rated">
    <a class="star" href="#" onclick="star(1,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(2,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(3,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(4,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(5,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
</div>

(@Admin , Moderator - how to make new lines ??)

When the page is rated, it appears like this:

<div class="punkty" id="punkty1445">
    <div class="rating">
        <a class="star" href="#" onclick="star(1,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(2,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(3,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
    </div>
    <div class="rated">
        <a class="star" href="#" onclick="star(4,6256,6,2,1445 ,3)" "="">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(5,6256,6,2,1445 ,3)" "="">
            <span>★</span>
        </a>
    </div>
    <span class="oc" itemprop="average" id="glos1445" style="font-weight:bold;margin-right: 10px;">3</span>
</div>

In the second example, the average page rate is indicated by the class "rating" (displayed in green). The "rated" class shows the stars to be voted on (in this case 3 green stars, 2 blue stars). In the first example, all 5 stars are blue and clickable until someone votes for 5, turning them into green stars. I hope that explanation makes sense.

Now, onto my question: How can I change the color of stars from left to right when pointing to one? For instance, if I point to the third star, the first, second, and third stars should change to gold. I attempted to achieve this using CSS but they turned gold from right to left. I suspect hard-core jQuery may be necessary for this task. Please assist me, as this is crucial.

jquerycss

Answer №1

If I were in your shoes, here's how I would tackle this problem. Instead of using traditional star images, I recommend utilizing icon fonts for a more seamless approach. There are numerous free icon font libraries available online that you can explore to find the perfect icons: .

The beauty of icon fonts lies in their versatility - you can easily adjust the size and color of the icons just like you would with regular text. Once you've implemented the icon fonts, you can enhance the visual appeal by adding the following CSS styles:

.rated {
 color: blue;
} 
.rating {
 color: red;
}

By default, the stars will appear blue, but when a user makes a selection, the chosen star will turn red. For step-by-step guidance on implementing icon fonts, check out this helpful tutorial:

If using icon fonts doesn't suit your preferences, you can achieve a similar result with background images. Create an image sprite containing the two states of the stars you need, then adjust the background position based on the parent container's class.

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

Exploring jQuery's capabilities with Cross-Domain URLs

I created a basic index.php file with the following code: <!DOCTYPE html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/httpGet.js"></script> <script type ...

phpjavascriptjquerycross-domaincross-domain-policy

Align a div in the center with another div positioned to its left and floated

I am in the process of creating a footer with three components: a logo aligned to the left, a centered navigation menu, and a set of social icons on the right. I have encountered an issue where when I float the logo to the left, the list items within my na ...

htmlcss

What is the best way to transfer the value of a slider from jQuery or JavaScript to a Python Flask application

Trying to implement a round slider that displays its value on the client-side webpage. Whenever the user adjusts the slider, the updated value needs to be sent to the server using Python Flask as the backend. I attempted to achieve this using jQuery and Aj ...

javascriptjquerypythonajaxflask

Using SVG as a background image in a div element

I'm currently working on implementing an animated SVG background similar to the one showcased here for educational purposes: It appears that using a CSS SVG background won't achieve the desired effect, so I need to create the elements inline wit ...

htmlcsssvg

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

javascriptcssbootstrap-4

Arranging two div elements side by side with spacing between them using CSS

Can anyone help me with aligning two divs side by side using CSS? I attempted a few methods on my own but seem to be stuck. Any suggestions would be greatly appreciated! CSS: .posts{ display: flex; flex-direction: row; } .posts .col-md-6{ pa ...

htmlcsslaravelbootstrap-4laravel-blade

Generating a Random CSS Class in JavaScript with Math.random() Function

I'm currently enrolled in a Basic HTML/Javascript course and I'm struggling with how to "modify the following JavaScript so that it picks one of the style classes at random each time it is called." The code provided below is functional, but lacks ...

htmlcssrandom

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

cssangularmapboxmapbox-gl-js

Is there a way to trigger the opening of a jQuery-UI-Selectmenu dropdown using the 'ENTER' key instead of the 'SPACE' key as indicated in the documentation?

I'm currently working on implementing jQuery-UI-Selectmenu to create a dropdown feature. As per the API documentation for select menu available at https://api.jqueryui.com/selectmenu/, it mentions that the 'SPACE' key can be utilized to ope ...

htmljquerydrop-down-menuaccessibilityjquery-ui-selectmenu

Using Jquery and AJAX to insert a PHP file into a DIV container

I am facing a challenge where I need to dynamically load a PHP file into a DIV element upon clicking a button, all without the page having to reload. If you refer to the 'Jsfiddle' document linked below, you will find further details and explana ...

phpjqueryhtmlajax

Progressive form upload with AJAX and sophisticated file uploading bar

I am currently working on a photographer portal that requires full administration, and I am facing challenges in implementing a progress bar for image uploads. While I am familiar with creating progress bars for simple file uploads, the complexity of the f ...

jqueryajax

Is there a way to disable the calendar linking feature in the iPhone Mail Client

I am currently working on an application where I generate emails with time stamps. However, when viewing these emails in the iPhone mail client, the timestamp gets turned into a link with an ugly blue color and underline. Is there a way to prevent this fro ...

iphonehtmlcssios

Deleting a row from the table with a single click on the X icon

Is there a way to delete individual rows in a table by clicking on a close icon instead of removing all rows at once? Additionally, I am looking for a better method to display rows in a table. You can view my current implementation here: link -> jsfiddl ...

javascriptjqueryhtml

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

htmlcssvertical-alignment

The Django application is failing to interact with the AJAX autocomplete functionality

After typing the term "bi" into the search bar, I expected to see a username starting with those initials displayed in a dropdown list. However, nothing is showing up. Here are the codes I have used: search.html <html> <div class="ui-widget"> ...

javascriptjquerypythonajaxdjango

Color schemes for items in the Windows store app

I'm having trouble changing the background color of an item in my split application. I've tried using CSS, but nothing seems to work. Here is the template for the item (default style): <div class="itemtemplate" data-win-control="WinJS.Bindin ...

javascripthtmlcsswindows-runtimewindows-store-apps

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

javascripthtmlcssbootstrap-4

Achieving vertical alignment for Bootstrap inputs on mobile devices and horizontal alignment on desktop screens

The code below showcases my current setup: <form> <div class="row"> <div class="col-md-8"> <label class="sr-only" for="first-name">First name</label> <input type="text" class="form-contr ...

htmlcssbootstrap-4

.toggle function malfunctioning

Upon page load, I have a script that toggles the County menu. The goal is to hide the county menu if any country other than "United Kingdom" is selected on page load. If the user selects another country after the page has loaded, there is an issue where ...

javascriptjqueryajax

Access the Windows directory through a custom HTML link

Currently, I am in the process of creating a personalized "website" that contains a collection of links leading to specific items on my computer. When I click on a link, the folder opens within the browser. Is there a way for these links to open Windows Ex ...

javascriptjqueryhtml