Changing an HTML Class with Hover Pseudo Class CSS-CodePudding

I'm newish to HTML/CSS (~2 months overall) and stack overflow (first post). Using fontawesome.com my idea is to make this icon flip when the cursor hovers over it. The icon flips when the class includes 'fa-flip' and doesn't when it's not. So I was trying to change the class with hover. How can i fix this?

HTML:

<body>  </body>

CSS:

body[]:hover

{}

CodePudding user response：

I think the problem here is the class attribute is added to  element, not <body> element.

Could you try this?(I am assuming the element created by the fontawesome is )

i[]:hover

CodePudding user response：

The best way to achieve this behavior is to do this using Javascript / Jquery.
I used Javascript to do this.

Two mouse pointer events are enough to make it work.
onmouseover = Calls when moving the mouse pointer onto an element.
onmouseleave = Calls when moving the mouse pointer out of an element.

<!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  onm ouseover="flipIcon(this)" onm ouseleave="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>