Use the Hover Pseudo Selector to Style Child Elements
We can use the :hover pseudo selector to conditionally style elements. In this example, we show how to do a show/hide for ghosting visual indicators on a tic tac toe board.
Jhey Tompkins: [0:00] We have our functioning tic-tac-toe board, but it'd be nice to give a visual indication of which piece is going to be placed and where.
[0:06] To do this, let's render the appropriate SVG inside each label. Now all of the SVGs show, which we do not want, so let's apply a class of "ghost," and let's define some styles for ghost. By default, every ghost will have an opacity of . We only want to show a ghost when we hover over a label, so let's use label:hover .ghost. Then let's set an opacity of .25.
[0:33] If we try our demo, we can see that a ghost appears on hover. Then we click to confirm. To make it a little smoother, let's apply a transition of opacity and then use our draw-speed variable from above. If we check our demo, our ghost fades in with a slight transition.
[0:51] In review, we can use the hover pseudo-class to apply styles to a child element on hover.