我陷入了这个问题，我想控制我的 Font Awesome 图标悬停并用javascript单击，我想当用户悬停到图标时显示另一个图标，当用户离开图标时，上一个图标会回来。当用户单击图标时，新图标出现，当用户离开鼠标时，前一个图标不会返回，当用户再次单击图标时，前一个图标返回。
这是我的 HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://kit.fontawesome.com/471cefd7e0.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<span class="select-me">
<i class="far fa-heart wishlist-item"></i>
<i class="fas fa-heart wishlist-item2"></i>
</span>
<span class="select-me">
<i class="far fa-heart wishlist-item"></i>
<i class="fas fa-heart wishlist-item2"></i>
</span>
<span class="select-me">
<i class="far fa-heart wishlist-item"></i>
<i class="fas fa-heart wishlist-item2"></i>
</span>
</body>
</html>
CSS 代码:
.wishlist-item {
color: red;
font-size: 2.5rem;
}
.select-me .wishlist-item2 {
display: none;
color: red;
font-size: 2.5rem;
}
JS代码:
var checkIt = true;
var node = document.querySelectorAll('.wishlist-item')
var node2 = document.querySelectorAll('.wishlist-item2')
var wishlistItems = Array.prototype.slice.call(node);
var wishlistItems2 = Array.prototype.slice.call(node2);
for(var i = 0; i < wishlistItems.length; i++) {
wishlistItems[i].addEventListener('mouseenter', function(){
this.style.display = "none"
wishlistItems2[( wishlistItems.indexOf( this ) )].style.display = "block"
})
}
for(var i = 0; i < wishlistItems2.length; i++) {
wishlistItems2[i].addEventListener('mouseleave', function(){
if (checkIt === true){
this.style.display = "none"
wishlistItems[( wishlistItems2.indexOf( this ) )].style.display = "block";
}
})
}
for (var i = 0; i < wishlistItems2.length; i++) {
wishlistItems2[i].addEventListener('click', function(){
this.style.display = "block";
wishlistItems[( wishlistItems2.indexOf( this ) )].style.display = "none";
checkIt = false;
})
}
jsfiddle 的链接:jsfiddle
最佳答案
您的主要问题是您识别鼠标所指内容的方式。您正在选择 span 元素，但随后尝试更改 i 元素(它是子元素)中的某些内容。将您的脚本更改为下面的脚本，它将起作用。另外，如果您不希望图标悬停在上方时移动，请添加 float: left;到两个 css 类。 (另外，我假设您从 HTML 文件中调用 CSS 和 JS 文件。)
var checkIt = true
var select = document.querySelectorAll('.select-me')
var wishlistItems = document.querySelectorAll('.wishlist-item')
var wishlistItems2 = document.querySelectorAll('.wishlist-item2')
for(var i = 0; i < select.length; i++) {
var add = i
select[i].addEventListener('mouseenter', function(){
this.children[0].style.display = "none";
this.children[1].style.display = "block"
console.log("mouseenter");
})
}
for(var i = 0; i < select.length; i++) {
select[i].addEventListener('mouseleave', function(){
if(checkIt === true) {
this.children[0].style.display = "block"
this.children[1].style.display = "none";
}
console.log("mouse leave");
})
}
for (var i = 0; i < select.length; i++) {
select[i].addEventListener('click', function(){
if(checkIt === true) {
checkIt = false;
}
else {
checkIt = true;
}
console.log("mouseclick");
})
}
关于javascript - 如何使用 JavaScript 控制图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61059617/