在鼠标悬停时交换多个图像

Question

我想在mouseover上交换多个图像，并且正在寻找一种方法来执行此操作。我期待着'点亮'多颗星星。下面的代码可以正常工作，但是当光标悬停在第三颗星上时，例如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

我禾ULD只是想提一提，这是很容易achieveable纯CSS和Flexbox的特点：

* {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; 
 
}

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

Answer 3

下面是普通的香草JavaScript的一个例子：

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

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

 
.star.active { 
 
    background: yellow; 
 
}

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