Skip to content
OverviewSolutions
5
Comments
3
P

mi souto

@mileineBrazil135 points

Now focused on building Frontend Skills from the ground up. ♥️

I’m currently learning...

HTML | CSS | JAVASCRIPT

Latest solutions

Latest comments

  • P
    mi souto•135
    @mileine

    Hey, Alice! Great work! 😊

    This is how your HTML code is structured:

    <div class="circle">
    <a href=""><i class="fab fa-facebook-f"></i></a>
 </div>

    I noticed you're changing the circle color on hover using .circle:hover. That's working as expected.✅

    Your <i> icon element is not updated because it's inheriting the <a> element. And the <a> element only changes when hover is on itself. Probably because it's inheriting this other rule that is applied on your <a> element on hover:

        color: #0056b3;

    (note that the blue on the symbol is different from the blue on the circle)

    You want the child element <a> color to be updated at the same time as the circle so you need to add a new rule for this element color to change when the hover is on the the parent element - <div class="circle">.

    This rule would be something like this:

    parent:hover child {
       color: hover-color
}

    I hope this helps. Happy coding! 💻✨😊

  • P
    mi souto•135
    @mileine

    Awesome!

    About changing the circle border color on hover, you can try changing it on its parent element <li> hover. =)

  • P
    mi souto•135
    @mileine

    Great work! =)

    Your solution does look great and your attention to details made me look to my solution in a different way so I could improve it too.

    I think it's impressive you implemented the drag and drop yourself, but maybe using a library would be a way to solve the issue with mobile devices. I used React Beautiful Dnd by Atlassian - with support for mobile devices - and I'll probably use it again on other projects because I really like the result.

    React Beautiful DnD https://github.com/atlassian/react-beautiful-dnd

    How to Add Drag and Drop in React with React Beautiful DnD https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/