Question

我试图在用户将鼠标悬停在图标上时更改图标。我的确在StackOverflow link上找到了类似的问题，但是当我尝试这样做时却没有那么有效。当我将光标放在其屏幕上时，开始滞后。所以我想知道是否有使用javascript的更好方法。

这是我的代码

index.html

<li class="nav-item hide-on-mb icon-box">
    <a href="#" class="nav-link ">
        <i class="fas fa-bars menu"></i>
        <i class="fas fa-times cross"></i>
    </a>
</li>

main.css

.icon-box {
        .cross {
            display: none;
        }
        :hover .menu {
            display: none;
        }
        :hover .cross {
            display: block;
        }
    }

Answer 1

使用onmouseover和onmouseout事件：

<i class="fas fa-times cross" onmouseover="this.className = 'fas fa-times cross'"; onmouseout="this.className='whatever the other class name is'" ></i>

Answer 2

您可以在不更改<i>元素上的类的情况下执行此操作-通过了解FA图标的实现方式-它们位于::可以在悬停时更改的伪元素之前。

只需了解每个图标的Unicode，您就可以设置默认状态，然后在悬停时进行更改，所有操作均使用CSS。

.icon-box { 
 list-style: none;
}

.icon-box i::before{
  content: "\f0c9";
  font-size: 24px;
}

.icon-box:hover i::before{
  content: "\f00d";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<p>Hover over the icon.... </p>

<ul>
<li class="nav-item hide-on-mb icon-box">
  <a href="#" class="nav-link ">
   <i class="fas"></i>
  </a>
  </li>
</ul>

Answer 3

尝试一下

.icon-box {
    .cross {
        display: none;

        &:hover {
            display: block;
        }
    }

    .menu {
        display: none;

        &:hover {
            display: block;
        }
    }
}

Pseudo class声明应位于选择器之后。

Answer 4

请查看以下示例，了解如何更改悬停图标

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.fa-facebook
{
opacity:0;
position:absolute;
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fade-out {
  from { 
    opacity: 1; 
  }
  to { 
    opacity: 0;
  }
}
</style>
</head>
<body>

<i class="fa fa-car"></i>
<i class="fa fa-facebook"></i>
<script>
$(document).ready(function(){
  $(".fa-car").mouseover(function(){
    $(".fa-car").css({"opacity":"0","position":"absolute"});
	$(".fa-facebook").css({"opacity": "1","position":"absolute", "animation-name": "fadeIn","animation-delay":"0.5s"});
  });
});
$(document).ready(function(){
  $(".fa-facebook").mouseover(function(){
    $(".fa-car").css({"opacity": "1","position":"absolute","animation-name": "fadeIn","animation-delay":"0.5s"});
   	$(".fa-facebook").css({"opacity":"0","position":"absolute"});
	
  });
});

</script>
</body>
</html>

这是通过使用动画和jquery完成的。图标只有在将鼠标悬停在图标上时才会更改

如何在悬停时更改图标（惊人的图标）

4 个答案: