如何使用 JavaScript 控制图标

Question

我被困在这个问题上我想控制我的 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;


    })
}

Link 对于 jsfiddle：jsfiddle

Answer 1

您的主要问题是您识别鼠标悬停的方式。您正在选择 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 控制图标

How to controlls icons with JavaScript

javascript

icons