Enhancing Child Elements with CSS - Evaluating Rating Systems

Is there a way to change the opacity of certain images inside my div when hovering over them? Specifically, I want the 4th image and the first three to have an opacity value of 1. I've looked into using nth-child but am unsure how to implement it for hovering effects. Additionally, is it possible to click on the 4th image and have all four images (except the last one) maintain an opacity of 1?

<div class="rating" style="width:75px;">
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />\
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
</div>

If you need further clarification or additional information, please feel free to ask!

CSS:

.rating span img {
    opacity:0.5;
}

.rating:hover span img {
    opacity:1;
}

.rating:hover span:hover ~ span img {
    opacity:0.5
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.plus {
    opacity:0.5;
}
.plus:hover {
    opacity:1;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  padding:1px;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   position: absolute;
}
javascriptjqueryhtmlcss

Answer №1

Here is a creative solution using only CSS:

CSS

.rating span img {
    opacity:0.5;
}

.rating:hover span img {
    opacity:1;
}

.rating:hover span:hover ~ span img {
    opacity:0.5
}

Check out the JSFiddle demo

Answer №3

Utilize the following jQuery function for highlighting selected stars:

// Add highlight to selected stars
$(document).on( "mouseenter mouseleave", 'span', function() {
    $(this).prevAll().andSelf().toggleClass('highlight');

});

Hovering over an icon will cause all icons before it and itself to toggle their class.

Example

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

Guide to ensuring jQuery Ajax requests are fully processed with WatiN

Currently, I am in the process of developing WatiN tests to evaluate an Ajax web application. However, I have encountered a timing issue with Ajax requests. My main objective is to ensure that WatiN waits for the Ajax request to be completed before valida ...

javascriptjqueryajaxwatin

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

javascriptangulartypescript

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

javascripthtmljqueryajax

Using jQuery Mobile alongside two distinct versions of jQuery

My current task involves inserting both jQuery and custom JavaScript into the DOM of an existing page. The jQuery is inserted right before my script, where I utilize window['my$'] = jQuery.noConflict(true);. This approach worked smoothly after ...

javascriptjqueryjquery-mobileconflicting-libraries

Can a JavaScript function be sent back via AJAX from PHP?

Can a javascript function be returned via Ajax from php? Typically, I would just return a value and handle it in plain javascript. However, since I am working on an Apache Cordova mobile app, I need to approach things differently. account = localStorage.g ...

javascriptphpjqueryajaxcordova

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

htmlcsstwitter-bootstrap

The Ajax function is unable to accept JSON data as input

I am trying to figure out why I am unable to access data from a JSON object (json.projects[i].projName) when calling it from within an AJAX function. Below is the code that demonstrates this issue: var json = JSON.parse(data); for (var i = 0; i < json ...

javascriptjqueryjsonajax

Navigate to a new webpage using a string of characters as a legitimate web address

When a user performs a search, I pass the search term as a string to direct them to a new page. How can I create a valid URL (e.g., remove spaces from the string)? It's crucial that the next page can recognize where any spaces were in the search word ...

javascriptjquery

Adding a horizontal scrollbar to an iframe: A step-by-step guide

My issue involves embedding this iframe element <iframe src="https://opendsa-server.cs.vt.edu/OpenDSA/Books/Everything/html/Write.html#recurWriteStepsCON" scrolling="no" id='frameid1' width=100% height=330px></iframe& ...

cssiframehorizontal-scrolling

How to Revalidate a Next.js Dynamic Route Manually Using an API Route?

In my application built with Next.js, I have a dynamic page that displays resources at the route /resource/[id]. When a user edits a resource, such as #5, I want to refresh the cached page at /resource/5. I've created an API route in my /pages direct ...

javascriptnext.jsnext.js13

Is there a way to implement full-page scrolling in Vue?

Looking for a Vue equivalent of the fullpage.js library. Need a component that allows scrolling through elements similar to fullpage.js. ...

javascriptvue.jsvuejs2vue-component

Using JSON in JavaScript to handle the click event of ASP.NET buttons

Here is the code that works well for me. I need to execute two different server-side functions, and they can't run at the same time as I have separated them. Default.aspx/AddCart btnUpdate Click Event The issue I'm facing is that the alert box ...

javascriptasp.netjsonvb.netwebmethod

How about designing a button with a dual-layered border for a unique touch

Looking for a specific button: My attempted CSS code that's not working: button { font-family: 'Ubuntu', sans-serif; font-size: 1em; font-weight: bold; color: white; border: 3px double #f26700; background: #f26700; ...

css

What are the steps for implementing videojs vr in a Vue.js project?

After installing the videojs vr with npm install --save videojs-vr, I attempted to use it in my project: https://i.stack.imgur.com/lSOqF.png However, I encountered this error message: https://i.stack.imgur.com/QSe1g.png Any assistance would be greatly ...

javascriptvue.jsvue-componentvideo.js

Remove an image that has been selected while uploading multiple images using AngularJS

If I want to delete a specific image from multiple uploads by clicking on the image in AngularJS, how can I achieve this? Each uploaded image has an associated textbox. When the delete icon on the image is clicked, both the image and the corresponding text ...

javascriptangularjsimage

Do we need to wait a considerable amount of time for an asynchronous function to run in a request?

I have a specific request that I need to address. The first snippet of code shows a function called handleUpdate1 which uses async/await to run a function named _asyncFuncWillRun10Minutes, causing the client to wait approximately 10 minutes for a response ...

javascriptnode.jsexpressasync-await

Loading additional content and executing queries using Ajax in WordPress

My attempt at adding a "load more" button to display posts is almost ideal, except for one issue. Every time I click on the button for the third time, it repeats the same three posts. For instance, if my posts are labeled t10 to t1, when I first load mor ...

phpjqueryajaxwordpress

Iterating through a nested array of objects to merge and accumulate values

Just started learning Javascript. I've been trying to wrap my head around it for hours, looking at examples, but still struggling. I'm working with an array of objects that have nested properties which I need to loop through and consolidate. ...

javascriptarraysdictionarynested

What could be causing my ASP.Net MVC script bundles to load on every page view?

I'm a bit puzzled. The _layout.cshtml page I have below contains several bundles of .css and .js files. Upon the initial site load, each file in the bundles is processed, which makes sense. However, every time a new view is loaded, each line of code f ...

javascripthtmlasp.net-mvcscriptbundle

Is it possible to use JQuery to target input nodes based on their values?

How can I check if any of the file input boxes in my list have a value using just one selector statement? Is it possible to achieve this with code like the following: $('input:file[value!=null]') Or is there another way to accomplish this? ...

javascriptjquery