Question

我想在鼠标悬停时交换多个图像，我正在寻找一种方法来做到这一点。我期待点亮＆＃39;多颗星星。下面的代码适用于一个，但是当光标悬停在第三个星上时，点亮3颗星的最佳方法是什么？

<div class="rating" data-value="4">
 <img src="star.png"/>
 <img src="star.png"/>
 <img src="star.png"/>
 <img src="star.png"/>
</div>

和JS：

$(".rating > img") .mouseover(function () {
            this.src= "star-on.png";
        }).mouseout(function () {
            this.src= "star.png";

});

Answer 1

你可以通过获取被碾过的集合中的星形索引然后根据该索引替换正确数量的星星来实现这一点：

$(".rating > img").mouseover(function () {
    // Get the index of the star that is being hovered over
    var idx = $("img").index(this);
   
    // Loop only over the stars that should be highlighted and highlight them.
    // Use the index to know how many to loop over
    for(var i = 0; i < idx + 1; i++){
      // "Light up" the star:
      $(".rating > img")[i].src= "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/2000px-Full_Star_Blue.svg.png";
    }
  }).mouseout(function () {
        
    // Turn off all stars
    $(".rating > img").each(function(){
    this.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png"
  });

});

img {
 width:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-value="4">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/1024px-Empty_Star.svg.png">
</div>

Answer 2

我想提一下，使用纯css和flexbox功能很容易实现这一点：

＆＃13;

* {box-sizing:border-box;}

body {padding:30px;}

.stars {
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:row-reverse;
}

.stars .star {
  flex: 0 1 50px;
  background:red;
  padding:20px;
}

.stars .star:hover, .stars .star:hover ~ .star {
  background:salmon;
}

＆＃13;

<div class="stars">
  <div class="star">4</div>
  <div class="star">3</div>
  <div class="star">2</div>
  <div class="star">1</div>
</div>

＆＃13;

Answer 3

这是普通的JavaScript中的一个例子：

＆＃13;

var stars = document.querySelector('.stars')

stars.addEventListener('mouseover', function(event) {
  var target = event.target
  var index = target.dataset.index

  for (var i = 0; i < 5; i++) {
    var star = stars.querySelector('[data-index="' + i + '"]')
    star.classList.toggle('active', i <= index)
  }
})

stars.addEventListener('mouseleave', function(event) {
  for (var i = 0; i < 5; i++) {
    var star = stars.querySelector('[data-index="' + i + '"]')
    star.classList.toggle('active', false)
  }
})

＆＃13;

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background: white;
}

.star.active {
  background: yellow;
}

＆＃13;

<div class="stars">
  <div class="star" data-index="0"></div>
  <div class="star" data-index="1"></div>
  <div class="star" data-index="2"></div>
  <div class="star" data-index="3"></div>
  <div class="star" data-index="4"></div>
</div>

＆＃13;

鼠标悬停时交换多个图像

3 个答案: