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

Question

我正在尝试根据数据评级标签在鼠标悬停时为 1 到 5 个元素着色。我正确地获取了数据，但是发生了几件事：

1. 每次悬停时该功能被访问 5 次，而不是一次访问。

2. 所有元素都在鼠标进入时获得颜色，然后所有 5 个元素在鼠标离开时被清除。

3. 我能感觉到有一种更简洁的方法可以做到这一点，尤其是在循环部分。我试图在这里保持干燥，这肯定不是干燥的。

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 stardocument.querySelector("h2").onmouseover = function(e) {&nbsp; // only if the element is of type `<i>`&nbsp; if(e.target.nodeName === "I") {&nbsp; &nbsp; // get the rating&nbsp; &nbsp; var rating = e.target.getAttribute("data-rating");&nbsp; &nbsp; // looping over the `<i>` elements and color them the correct way&nbsp; &nbsp; // so only from 0 to the current rating are yellow and the rest&nbsp; &nbsp; // are black and that makes sure the highlighting is updated even&nbsp;&nbsp; &nbsp; // if the user keeps moving over the stars&nbsp; &nbsp; Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");&nbsp; }}// reset the color of all the starsdocument.querySelector("h2").onmouseleave = function() {&nbsp; Array.prototype.forEach.call(this.children, c => c.style.color = "black");}<script src="https://kit.fontawesome.com/a076d05399.js"></script><h2>&nbsp; <i class="fas fa-star" data-rating="1"></i>&nbsp; <i class="fas fa-star" data-rating="2"></i>&nbsp; <i class="fas fa-star" data-rating="3"></i>&nbsp; <i class="fas fa-star" data-rating="4"></i>&nbsp; <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++) {&nbsp; &nbsp; $(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++) {&nbsp; &nbsp; $(this).parent().children().eq(i).css('background-color', 'transparent');}});

Answer 4

你可以使用 :hover psudo class 在 css 中使用背景颜色.yourclass:hover{background-color: yellow;}或者使用添加事件监听器

Answer 5

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