javascript - 我想在悬停时更改 html 类
问题描述
需要将悬停时的类更改为 fa-angle-down
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fas fa-angle-down');
}, function () {
$(this).removeClass('fas fa-angle-up');
});
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#home" id="home">Services <i id="angle" class="fas fa-angle-up"></i></a>
脚本
解决方案
当鼠标经过时,您正在添加 fa-angle-down
,当它消失时,您正在删除 fa-angle-up
。
如果要交换它们,则需要每次添加一个并删除类。
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fa-angle-down').removeClass('fa-angle-up');
}, function () {
$(this).addClass('fa-angle-up').removeClass('fa-angle-down');
});
});
推荐阅读
- python - 为什么 python 在使用 ctypes 加载 dll 时会引发错误 OSError?
- jira - JIRA 在上个月的报告中花费了时间
- angular - 基于 ResponseHeaders 解析响应
- ios - Swift ios如何设置导航栏图像不拉伸
- html - 为什么 height 100% 不能将 div 完全扩展到页面底部?
- jwt - 无法为 Apollo 客户端设置身份验证标头
- java - 查询DSL 4.1.4,Jpa GROUP BY Date
- c# - WriteableBitmap 周围不需要的红色边框
- java - 扫描文档中的某些文本,替换某些单词(这些单词应该是变量)并使用 Java 中的 Apache POI 保存在新文档中
- c# - 在 Thread 中实现 asnyc 方法