CODEWITHSUNDEEP
javascripthtmljquerycss
Super
Super

Reputation: 15

Highlight an array of elements on hover

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:

  1. The function is accessed 5 times on each hover, instead of a single access.
  2. All of the elements gets the color on mouse enter, then all 5 gets cleared on mouse leave.
  3. 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

Upvotes: 0

Views: 480

Answers (5)

Tahlil
Tahlil

Reputation: 1091

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

Upvotes: 0

Saadi Toumi Fouad
Saadi Toumi Fouad

Reputation: 2829

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>

Upvotes: 1

Altantur
Altantur

Reputation: 2712

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

Upvotes: 0

Mafee7
Mafee7

Reputation: 47

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


.yourclass:hover{

background-color: yellow;

}

Or Use add event listener

Upvotes: 0

Mafee7
Mafee7

Reputation: 47

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


.yourclass:hover{

background-color: yellow;

}

Upvotes: 1

Related Questions