Skip to content
Submitted over 1 year ago

Time tracking dashboard with Grid

A.•390
@MooseCowBear
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

The active states for this challenge show that hovering/focusing on the container should change the container's background color, but that hovering/focusing on an ellipsis image should not. In the case of keyboard navigation, css was able to achieve this. But I could not find a css solution for getting the same effect when hovering with the mouse.

Does anyone know if there is a way to get the (lack of) hover effect of a parent element with css? Or is this something I would have to do in JS?

Community feedback

  • Manish Patel•730
    @savvystriderPosted over 1 year ago

    You can use the :not() CSS pseudo selector. It would work something like this:

    .container:hover:not(.icon) {...};

    MDN link

    0
    A.•390
    @MooseCowBearPosted over 1 year ago

    @savvystrider I did try that, but it didn't work.

    I tried it both as .section-info:hover:not(.section-heading > img) where ".section-info" is the container and ".section-heading" is a child of section-info and the ellipsis image is a child of that, and as .section-info:hover:not(img) since the only image in the container is the ellipsis. Neither worked.

    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