鼠标悬停时交换多个图像
Swap Multiple Images on mouseover
我想在鼠标悬停时交换多个图像,并且正在寻找一种方法来执行此操作。我期待 'light up' 多颗星。下面的代码适用于一个,但是当光标悬停在第三颗星上时,点亮例如三颗星的最佳方式是什么?
<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";
});
您可以通过获取鼠标悬停在集合中的星星的索引,然后根据该索引替换正确数量的星星来做到这一点:
$(".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>
我只想提一下,这很容易通过纯粹的 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>
这是一个普通的例子 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>
我想在鼠标悬停时交换多个图像,并且正在寻找一种方法来执行此操作。我期待 'light up' 多颗星。下面的代码适用于一个,但是当光标悬停在第三颗星上时,点亮例如三颗星的最佳方式是什么?
<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";
});
您可以通过获取鼠标悬停在集合中的星星的索引,然后根据该索引替换正确数量的星星来做到这一点:
$(".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>
我只想提一下,这很容易通过纯粹的 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>
这是一个普通的例子 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>