@KirativeWD
Posted
Hi there!
Great job on completing this challenge.
"Are there any ways to change the box-shadow of the ".content" class only when hovering on the h1 element without using js?"
Technically, yes.
.content {
pointer-events: none;
}
.content:hover {
box-shadow: 1rem 1rem black;
}
h1 {
pointer-events: auto;
}
h1:hover {
color: hsl(47, 88%, 63%);
}
However, that is overly complicated and what you could do instead is apply the color change to the h1 when .content is hovered. As a user, this makes more sense because I expect the entire card to be clickable and not just the h1.
.content:hover h1 {
color: hsl(47, 88%, 63%)
}