![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/qdkskstwpmfvby0bhwvg.jpg)
Design comparison
Solution retrospective
By getting knowledge that :hover
pseudo-element can't apply any changes to parent of the selected element .
1.I've tried to make change my #blog-preview-card
's(parent element, container) shadow-box value by hovering the #header
(child element) .This turned out to work only in opposite way, e.g. this way:
.parent:hover .child { background-color: white; }
.
(When you hover over the parent element, it will change the background color of the child element to white)
I've seen some variants for solution of my problem with pseudo-element :has
and assigning position: relative
to parent and position: absolute
to child element but it didn't worked at my case. If It's possible and can work with my code please write your options. I struggled a lot with this and it's a bit annoying to leave it how it is, but if it's realm of JavaScript usage, okay, so be it.
2.W3C validator, seems, not to be complaining about my code, but if you look and it's semantic will seem to you wrong/unnecessary/unreasonably overcomplicated, I'll be grateful for letting me know.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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