Skip to content
Submitted almost 3 years ago

Time tracking dashboard

Volodymyr Balashov•510
@volod-one
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hellllo there!

I have one more solution for another challenge. Here is some Next.js with Tailwind. I added some simulation of data fetching so you can see loading screen and then some simple fadein animation for the component.

I got a little bit confused with using Tailwind hover effects. And couldn't figure out how I can prevent card hover effects on ellipsis hover. Any clue for that?

Anyways. Give your feedback with critique and see you next time!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Volodymyr,

    I didn't understand what you would like to prevent, could you explain in more detail :)

    Marked as helpful
    0
    Volodymyr Balashov•510
    @volod-onePosted almost 3 years ago

    @denielden Okay, so, my problem here is. When you hover mouse on those ellipsis the card still keeping hover effect. According to design it shouldn't happen. These dots should have hover effects separately from card hover effects.

    1
    Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    @DevilDoctor27 Ok now I understand!

    Basically you can't but there is a trick: read this -> [stackoverflow](https://stackoverflow.com/questions/17923922/hover-on-child-without-hover-effect-on-parent

    Anyway congratulations you did a great job! I like the hover effect of the cards a lot :)

    Happy coding and let me know if you can solve ;)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord