Strategy 2: CSS descendant selector
In the previous lesson, we learned how to modify a hovered graph item using the :hover CSS pseudo-class.
However, this approach has design limitations. To achieve a more effective highlighting effect, it's better to simultaneously dim the other graph items.
This can be accomplished using CSS alone, with the help of the CSS descendant selector.
What is a css descendant selector?
A descendant selector allows to target elements that are children of another element.
Here’s an example:
.rectangle {
opacity: 1;
}
.container:hover .rectangle {
opacity: .1;
}
.container .rectangle:hover {
opacity: 1;
}We assign a class called container to the SVG container and a class called rectangle to each rectangle in the chart.
Then we set the default rectangle opacity to 1. Using the descendant selector, you can reduce the opacity of all rectangles to 0.1 when the container is hovered.
Then, use a hover selector to set the opacity of the hovered rectangle back to 1.
Application: treemap
Strategy 2: use CSS descendant combinator to dim all markers except the one that is hovered.
Pros & Cons
- Easy to implement
- Improves design by making hover effects more noticeable
- Excellent performance (no JS computation, minimal redrawing)
- Fades all circles if the mouse enters the chart area without hovering over a specific circle. This technique works for chart where the whole svg area is covered by markers, like a treemap.
- Cannot highlight circles that are obscured by other elements. (Potentially fixed using
z-index).
More examples
The examples below all use this strategy to implement their hover effect.
