Illuminate a group of items when hovering over them

Question

Illuminate a group of items when hovering over them

While attempting to change the color of 1 to 5 elements on mouse hover based on the data-rating tag, I am encountering a few issues. The data is retrieved correctly, but there are some problems:

The function is being called 5 times each time there is a hover, instead of just once.
All elements receive the color upon mouse enter, then all 5 colors are removed upon mouse leave.
I believe there must be a more efficient way to achieve this, especially in the loop section. I aim to keep it DRY (Don't Repeat Yourself) here, and the current method definitely does not adhere to that principle.

The HTML code snippet:

<h2>
  <i class="far fa-star" data-rating="1">1</i>
  <i class="far fa-star" data-rating="2">2</i>
  <i class="far fa-star" data-rating="3">3</i>
  <i class="far fa-star" data-rating="4">4</i>
  <i class="far fa-star" data-rating="5">5</i>
</h2>

The jQuery part:

$('[class="far fa-star"]').mouseenter(function() {
  var target = parseInt($(this).data('rating'));

  for (i = 0; i < target; i++) {
    $(this).parent().children(i).css('background-color', 'yellow');
  }
});

$('[class="far fa-star"]').mouseleave(function() {
  var target = parseInt($(this).data('rating'));

  for (i = 4; i > target; i--) {
    $(this).parent().children(i).css('background-color', 'transparent');
  }
});

Check out the fiddle here: fiddle

javascript html jquery css

Answer 1

Answer №1

It seems like there was some confusion with the previous responses, but I believe I understand your request for a highlighting feature in your rating system. Here is an example that demonstrates how to achieve this:

// This code snippet uses event delegation to highlight stars on mouseover
document.querySelector("h2").onmouseover = function(e) {
  // Check if the element is an <i> tag
  if(e.target.nodeName === "I") {
    // Get the current star's rating
    var rating = e.target.getAttribute("data-rating");
    // Change the color of stars based on their position relative to the hovered star
    Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");
  }
}

// Reset the color of all stars on mouseleave
document.querySelector("h2").onmouseleave = function() {
  Array.prototype.forEach.call(this.children, c => c.style.color = "black");
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<h2>
  <i class="fas fa-star" data-rating="1"></i>
  <i class="fas fa-star" data-rating="2"></i>
  <i class="fas fa-star" data-rating="3"></i>
  <i class="fas fa-star" data-rating="4"></i>
  <i class="fas fa-star" data-rating="5"></i>
</h2>

Answer 2

It seems like there was some confusion with the previous responses, but I believe I understand your request for a highlighting feature in your rating system. Here is an example that demonstrates how to achieve this:

// This code snippet uses event delegation to highlight stars on mouseover
document.querySelector("h2").onmouseover = function(e) {
  // Check if the element is an <i> tag
  if(e.target.nodeName === "I") {
    // Get the current star's rating
    var rating = e.target.getAttribute("data-rating");
    // Change the color of stars based on their position relative to the hovered star
    Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");
  }
}

// Reset the color of all stars on mouseleave
document.querySelector("h2").onmouseleave = function() {
  Array.prototype.forEach.call(this.children, c => c.style.color = "black");
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<h2>
  <i class="fas fa-star" data-rating="1"></i>
  <i class="fas fa-star" data-rating="2"></i>
  <i class="fas fa-star" data-rating="3"></i>
  <i class="fas fa-star" data-rating="4"></i>
  <i class="fas fa-star" data-rating="5"></i>
</h2>

Answer 3

Answer №2

To add a background color in CSS, simply use the :hover pseudo-class


.yourclass:hover{
    background-color: lightblue;
}

Answer 4

To add a background color in CSS, simply use the :hover pseudo-class


.yourclass:hover{
    background-color: lightblue;
}

Answer 5

Answer №3

Applying Background Color Using :hover Pseudo Class in CSS


.yourclass:hover{

background-color: blue;

}

Alternatively, You Can Implement an Event Listener

Answer 6

Applying Background Color Using :hover Pseudo Class in CSS


.yourclass:hover{

background-color: blue;

}

Alternatively, You Can Implement an Event Listener

Answer 7

Answer №4

After reviewing your code, I believe CSS is the solution for achieving this. Make sure to take a look at this related question for additional guidance.

Answer 8

After reviewing your code, I believe CSS is the solution for achieving this. Make sure to take a look at this related question for additional guidance.

Answer 9

Answer №5

Here is a code snippet that can help you achieve the desired effect:

$('[class="far fa-star"]').mouseenter(function () {
var rating = parseInt($(this).data('rating'));

for (i = 0; i < rating; i++) {
    $(this).parent().children().eq(i).css('background-color', 'yellow');
}
});
$('[class="far fa-star"]').mouseleave(function () {
var rating = parseInt($(this).data('rating'));

for (i = 0; i < rating; i++) {
    $(this).parent().children().eq(i).css('background-color', 'transparent');
}
});

Answer 10

Here is a code snippet that can help you achieve the desired effect:

$('[class="far fa-star"]').mouseenter(function () {
var rating = parseInt($(this).data('rating'));

for (i = 0; i < rating; i++) {
    $(this).parent().children().eq(i).css('background-color', 'yellow');
}
});
$('[class="far fa-star"]').mouseleave(function () {
var rating = parseInt($(this).data('rating'));

for (i = 0; i < rating; i++) {
    $(this).parent().children().eq(i).css('background-color', 'transparent');
}
});

Illuminate a group of items when hovering over them

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

When attempting to access Firestore on a non-local server without using a virtual machine on AWS, the following error occurs: { Error: Module 'grpc' not found

Can you include both a routerLink and a click event on the same anchor tag?

Tips for incorporating captions into a slideshow

All web browsers are supported by the HTML time input type for time formatting

Enhancing Communication Between JavaScript and PHP

Is there a way to adjust a simple program using Discord.js where the setTimeout within a for-loop can print values sequentially instead of simultaneously?

Challenges encountered when sending a variable from jQuery to PHP

Establishing connections in neo4j with the neo4j-nodejs API

How can you animate a MUI v4 Grid element using CSS transitions?

What is the correct way to assign a $scope variable after a successful ajax call?

Identifying an Incorrect Function Call in a TypeScript Function from a JavaScript File [TypeScript, Vue.js, JavaScript]

The outcome of the AJAX RSS Reader remains unpredictable

Create a dynamic table using an array in jQuery

Is it possible to transmit identical data from a form to two distinct actions in Symfony5?

Implementing Facebook conversion tracking when there is no distinct 'Thank you' page can be done by utilizing the onclick event

Utilizing Ajax for JSON data transmission and handling with Spring MVC Controller

problem with selection of date and month in dropdown list with jquery

Automatically populate a dropdown list based on the selection made in another dropdown menu

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

Managing an undetermined quantity of elements from a form in PHP