0

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> <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>}

Arishorts
  • 1
  • 1
  • 1
    To add the class you'd need to use Javascript - is this acceptable? If not then you could find out what that fa-flip class does and include that yourself in the :hover of the i element (not of the body element). – A Haworth Nov 26 '22 at 09:51

2 Answers2

0

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

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

i[class="fa-solid fa-user fa-flip"]:hover
TK'
  • 302
  • 2
  • 10
  • HTML `` CSS `i[class="fa-solid fa-user"]:hover { }` i tried this above and it still wont. perhaps javascript is the way to go like the gentleman answered above? Also i realized that when i wrote the original code i used: `body[class="fa-solid fa-user fa-flip"]:hover` instead of `body[class="fa-solid fa-user"]:hover` so i wasn't even using the correct selector – Arishorts Nov 26 '22 at 16:52
  • Ahh, I think I see what you want to do now. If you want to add flip styling by adding/removing `fa-flip` class to the icon, yeah I think JavaScript is the way to go. Just for your reference, you can achieve flipping with CSS also. Here is the demo. I am using an emoji instead of a fontawesome icon, but I hope you get an idea. https://codesandbox.io/s/flip-smile-icon-kwzm8u?file=/src/styles.css – TK' Nov 27 '22 at 00:09
  • ya you got the idea :) this is what i was looking for. I see i need more javsacript and that'll come. I like your solution, it made me aware that i can get away with some CSS "animation" if im creative enough. – Arishorts Nov 28 '22 at 13:30
0

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 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>
Neha Soni
  • 3,935
  • 2
  • 10
  • 32
  • I plan on starting to learn javascript after completing this HTML/CSS course. I'll have to revisit this solution in a month or so. Sucks that i have no idea how to implement it now. I appreciate you taking the time to help me though. Will get back to you when i try it out. – Arishorts Nov 26 '22 at 16:55