在悬停时突出显示一组元素

Question

我正在尝试根据数据评级标签在鼠标悬停时为 1 到 5 个元素着色。我正确地获取了数据，但是发生了几件事：每次悬停时该功能被访问 5 次，而不是一次访问。所有元素都在鼠标进入时获得颜色，然后所有 5 个元素在鼠标离开时被清除。我能感觉到有一种更简洁的方法可以做到这一点，尤其是在循环部分。我试图在这里保持干燥，这肯定不是干燥的。HTML 部分<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>jQuery 部分：$('[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');  }});小提琴在这里 -小提琴

Answer 1

我认为其他人不明白你真正想要什么，我从你的问题中了解到你想要为你的评级系统提供突出显示功能，这是一个例子

// 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>

Answer 2

你可以使用 :hover psudo class 在 css 中使用背景颜色

.yourclass:hover{

background-color: yellow;

}

Answer 3

我认为这是您要达到的效果：

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

}

});

Answer 4

你可以使用 :hover psudo class 在 css 中使用背景颜色

.yourclass:hover{

background-color: yellow;

}

或者使用添加事件监听器

Answer 5

看你的代码，可以用CSS来实现。