Highlight an array of elements on hover

Question

I'm trying to color between 1 and 5 elements on mouse hover, based on data-rating tag. I get the data correctly, but several things happen:

The function is accessed 5 times on each hover, instead of a single access.
All of the elements gets the color on mouse enter, then all 5 gets cleared on mouse leave.
I can feel there is a much more concise way of doing it, particularly in the loop section. I'm trying to keep it DRY here, and this ain't DRY for sure.

The HTML portion

<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 portion:

$('[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');
  }
});

fiddle is here - fiddle

Do you want to highlight only the individual element on hover, instead of highlighting all of them? — Tahlil, Oct 14 '20 at 05:51
Let's say I hovered on #3 - highlight all of the elements up to #3. — Super, Oct 14 '20 at 06:06

score 1 · Answer 1 · answered Oct 14 '20 at 05:47

1

You Can Use Background Color in css with :hover psudo class


.yourclass:hover{

background-color: yellow;

}

answered Oct 14 '20 at 05:47

Mafee7

47
4

How will that change the color of the preceding elements? That was the whole point I used jQuery for... – Super Oct 14 '20 at 06:03

score 1 · Accepted Answer · answered Oct 14 '20 at 06:11

I think the others didn't understand what you really want, I understood from your question that you want a highlighting feature for your rating system, here is an example

// using event delegation to get the current mouse hovered star
document.querySelector("h2").onmouseover = function(e) {
  // only if the element is of type `<i>`
  if(e.target.nodeName === "I") {
    // get the rating
    var rating = e.target.getAttribute("data-rating");
    // looping over the `<i>` elements and color them the correct way
    // so only from 0 to the current rating are yellow and the rest
    // are black and that makes sure the highlighting is updated even 
    // if the user keeps moving over the stars
    Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");
  }
}

// reset the color of all the stars
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>

score 0 · Answer 3 · answered Oct 14 '20 at 05:59

0

You Can Use Background Color in css with :hover psudo class


.yourclass:hover{

background-color: yellow;

}

Or Use add event listener

answered Oct 14 '20 at 05:59

Mafee7

47
4

I am adding an event listener by that mouseenter/mouseleave function... – Super Oct 14 '20 at 06:04

score 0 · Answer 4 · answered Oct 14 '20 at 06:09

0

Looking at your code, it can be achieved by CSS. Please check this question s approved.

answered Oct 14 '20 at 06:09

Altantur

2,552
1
13
12

score 0 · Answer 5 · answered Oct 14 '20 at 06:31

I think this is the effect you are trying to achieve:

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

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

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

Highlight an array of elements on hover

5 Answers5