Strat 2: descendant selector
With a CSS descendant selector, you can dim all items when the container is hovered, then restore full opacity on the hovered item.
Still pure CSS, still great performance — and the design is much stronger since the hovered element now stands out from the rest.
The problem with Strategy 1
In the previous lesson, we used a :hover pseudo-class to change the style of the hovered element. It works, but the result is underwhelming : the non-hovered circles remain fully visible, so the hovered one barely stands out.
A much stronger effect is to dim everything else when one element is hovered. This way, the active element pops out by contrast. And we can do this with pure CSS.
What is a descendant selector?
A descendant selector targets elements that are children of another element. The syntax is simple: write the parent selector, a space, then the child selector.
This will select only the items that have the class item that are children of elements with the container class.
Anatomy of a CSS descendant selector
Descendant selector + Pseudo class
Combining descendant selector with pseudo class is the secret sauce to make a good hover effect with css only.
The trick is to combine it with :hover in a clever way. Here's the recipe in 3 CSS rules:
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login