使用悬停伪类 CSS 更改 HTML 类答案

【问题标题】：Changing an HTML Class with Hover Pseudo Class CSS使用悬停伪类 CSS 更改 HTML 类
【发布时间】：2022-11-26 17:15:52
【问题描述】：

我对 HTML/CSS（总共约 2 个月）和堆栈溢出（第一篇文章）不熟悉。使用 fontawesome.com 我的想法是让这个图标在光标悬停在它上面时翻转。当类包含“fa-flip”时图标会翻转，不包含时则不会。所以我试图用悬停来改变课程。我怎样才能解决这个问题？

HTML:

<body>  </body>

CSS：

body[class="fa-solid fa-user fa-flip"]:hover

{}

【问题讨论】：

标签： html css hover pseudo-class icon-fonts

【解决方案1】：

我认为这里的问题是类属性被添加到元素，而不是<body>元素。

你能试试这个吗？（我假设 fontawesome 创建的元素是 ）

i[class="fa-solid fa-user fa-flip"]:hover

【讨论】：

【解决方案2】：

实现此行为的最佳方法是使用 Javascript / Jquery 执行此操作。
我使用 Javascript 来做到这一点。

两个鼠标指针事件足以让它工作。
onmouseover = 将鼠标指针移动到元素上时调用。
onmouseleave = 将鼠标指针移出元素时调用。

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
</head>
<body>
<i class="fa-solid fa-user" onmouseover="flipIcon(this)" onmouseleave="unFlipIcon(this)"></i>

<script>
function flipIcon(el) {
 el.classList.add('fa-flip');
 // See in console if 'fa flip' class is added.
 console.log('On Mouse Hover  -  ', el.className);
}

function unFlipIcon(el) {
 el.classList.remove('fa-flip');
 // See in the console if 'fa flip' class is removed.
 console.log('On Mouse Leave  -  ',el.className);
}

</script>


</body>
</html>

【讨论】：