Using jQuery and CSS to illuminate a specific number of stars

I am currently developing a star-voting system that displays 5 stars, with the lit-up stars representing the average star rating. When hovering over a star, such as number 4, I would like to illuminate the 4th star from the right. Similarly, if hovering over 2, the two stars to the right should light up, and so on. If all 5 stars are hovered over, then all stars should be illuminated. The stars are styled using CSS classes .iconFavorite for regular stars and .iconFavorite_hover for the illuminated stars. Therefore, when hovering over 3 stars, the code appears as follows:

<div class="iconFavorite_hover"></div>
<div class="iconFavorite_hover"></div>
<div class="iconFavorite_hover"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>

To see an example of this functionality in action, you can visit retardo.dk/videos.php?id=905 where you can hover over the big green stars to see them light up based on your selection.

If you're interested in how to achieve this effect, you can view my current code without jQuery on this jsfiddle: http://jsfiddle.net/8vzCC/1/

javascriptjquerycss

Answer №1

Check out this example in action: JS Fiddle. Don't forget to add a third class for the "permanent" light up stars.

Here's the jQuery code to make it all work:

$(function() {
    $('.icon').mouseover(function() {
        $(this).addClass('iconFavorite_hover');
        $(this).prevAll('.icon').addClass('iconFavorite_hover');
    });
    $('.icon').mouseout(function() {
        $(this).removeClass('iconFavorite_hover');
        $(this).prevAll('.icon').removeClass('iconFavorite_hover');
    });
});

If you need more functionality, I've made some adjustments: See updated fiddle here. There are new classes and additional hover effects.

Answer №2

Is this solution effective? Here is the link to test it out: http://jsfiddle.net/8vzCC/33/ It successfully removes everything following it :) Give it a try!

UPDATE: Updated version that should meet your requirements perfectly :)

Answer №3

Is it possible to assign unique IDs to each div? Then use jQuery to achieve the following functionality: When hovering over a specific div, find its ID and select all divs with IDs lower or equal to that number, then apply the class "IconFavorite_Hover".

Answer №4

$(".iconFavorite").onmouseover(function(){

        $(this).prevAll(".iconFavorite").add(this).addClass(".iconFavorite-hover").removeClass(".iconFavorite");
        $(this).nextAll(".iconFavorite-hover").addClass(".iconFavorite").removeClass(".iconFavorite-hover");

}).onmouseout(function(){
    $(".iconFavorite-hover").addClass("hover").removeClass(".iconFavorite-hover");
});

This code also ensures that when hovering over a star, only the previous stars will have the hover effect. This prevents unintended highlighting on stars ahead of the one being hovered over.

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

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

javascripthtmlsvgjquery-svgsvg-edit

Verify the presence of the position

I'm working on a page that contains elements with relative positioning. style="position: relative;" Some of the elements have top and left coordinates while others do not. I am wondering if it's possible to check for the presence of these coord ...

jquery

CakePHP issue: Passing variable to view not successful

We are experimenting with two forms that submit to the same action. Our goal is to capture the value of the input field "txt1" from the first form and send it to the Lists controller, where this value will be used in a for loop within the second form to dy ...

phpjqueryajaxcakephp

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

javascriptjquerycss

Having trouble with React state not updating accurately. The increment and decrement function is not functioning properly on the initial click, but seems to work fine after

React state updates not functioning properly. The increase and decrease functions are not working on the first click but work after subsequent clicks. The subtotal value is consistently incorrect, showing as 94.50 instead of the expected 105 for a quanti ...

javascriptreactjsreact-hooks

Tips for Resolving the "304 Not Modified" Alert in jQuery UI and Ruby on Rails

Please take note: The question has been revised. The Issue: The integration of jQuery UI 1.9 into Ruby on Rails 3.2 is leading to a noticeable delay in loading time for the website. The Advisory Notice: Initiated GET "/assets/jquery-ui-1.9.2.custom/d ...

jqueryruby-on-railsjquery-uiruby-on-rails-3.2

Tips for centering a button within the body of a webpage

Despite my efforts, the alignment is not working as expected. The CSS I am using specifies that every <div> button inside the body should be centered both vertically and horizontally. However, it seems like something is preventing this from happeni ...

htmlcssflexbox

The error "ReferenceError: Component is not defined in Meteor" indicates that the Component

I'm facing an issue while trying to display my Deal component and encountering the error mentioned below. I am currently utilizing Meteor along with ReactJS. Uncaught ReferenceError: Deal is not defined at meteorInstall.imports.routes.routes ...

javascriptreactjsmeteor

Is there a way to store my countdown timer in a session storage to prevent it from resetting when the page is reloaded?

I have integrated the Countdown.js API into my JavaScript file, utilizing a variable called timer. var countDownCompleted = false; var myCountdownTest = new Countdown({ time: timer, width: 200, height: 80, onComplete: countdownComplete, ...

javascriptcountdowntimersession-storage

The jQuery Select2 Plugin for Dynamic Dropdowns with Ajax Integration

Utilizing the Select2 plugin with Ajax to connect to my employee database has been quite helpful. It allows setting up a meeting and selecting all the employees you wish to invite. Here is an example of the code: $("#requiredAttendees").select2({ ...

javascriptjqueryajaxjsonjquery-select2

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

Jquery form is failing to submit, or there is no indication that it has been successfully submitted

I'm having an issue with submitting an Ajax form using JQuery and can't seem to figure out what's wrong: <script type="text/javascript"> $(document).ready(function() { $('#phot ...

jquery

Could anyone please provide advice on how to resolve the issue I encountered when trying to make Post and get Http method calls using protractor?

I am currently facing an issue while trying to make a GET API request using protractor. The challenge lies in using the bearer token generated from a previous POST response in the headers of the GET request. Although I have successfully executed the POST r ...

javascriptapiauthenticationautomationprotractor

Space within a series of photographs

Looking for some assistance: I am trying to maintain a consistent margin of 10px between posts and between photos in a photoset. However, when a post is a photoset, the margins of the bottom photo and the overall post add up to 20px. I want to retain the ...

htmlcssmarginmargins

What is the process for creating an xpath for hyperlinks with the 'contains text' attribute?

I am in need of creating Xpath for links based on contained text. I have devised the following code to achieve this, however, a scenario arises when there are three links named 'Entity', 'Entity Type', and 'Entity Group'. If I ...

javascriptjqueryseleniumxpathselenium-webdriver

Is there a way to consistently maintain a specific column size in Bootstrap?

I'm currently working on a website and running into an issue that I can't seem to resolve. The problem lies in the layout of multiple cards with information; they are arranged in columns and when there are more than 4 columns, they switch to a ne ...

c#htmlcssbootstrap-4razor-pages

Completely place one element with respect to its sibling element

I am currently facing a situation where I have implemented a Navigation bar wrapper that reveals an overlay across the entire page when clicked. In order for this setup to function correctly, all the elements that the overlay covers must be sibling elemen ...

htmlcssreactjspositionabsolute

Advance the jQuery FullCalendar by one week and disable the next button

Greetings everyone and thank you for taking the time to peruse this. I am currently working with a jQuery calendar and attempting to create a personalized view. Specifically, if I am utilizing the agenda week view to display all days in a given week, how c ...

jquerycalendar

Implementing onClick functionality in RecyclerView post JSON data extraction

I recently implemented a RecyclerView in a fragment and successfully parsed JSON data from a website to display it in the RecyclerView following a helpful tutorial found at: Now, my next challenge is adding an onClick listener to the items in the Recycler ...

javascriptandroidjson

Using jQuery Ajax to Retrieve Data from a Textbox Array

I am new here, Usually, I use pure PHP to insert data into MySQL, but now I have to use jQuery Ajax for some reason. Here is the HTML code: <input name="produk[]" value="cookies" class='product' type="text" /><input name="qty[]" clas ...

jqueryajax