我是HTML/CSS的新手(大约2个月)和堆栈溢出(第一篇文章)。使用fontawesome.com我的想法是使这个图标翻转当光标悬停在它上面。当类包含'fa-flip'时，图标会翻转，而当类不包含'fa-flip'时，图标不会翻转。所以我试着用悬停来改变这个类。我怎样才能解决这个问题?
HTML:
<body><i class="fa-solid fa-user"></i></body>
CSS:
body[class="fa-solid fa-user fa-flip"]:hover
{<i class="fa-solid fa-user fa-flip"></i>}
我认为这里的问题是类属性被添加到<i>元素，而不是<body>元素。
你能试试这个吗?(我假设fontawesome创建的元素是<i>)
i[class="fa-solid fa-user fa-flip"]:hover
实现此行为的最佳方法是使用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>