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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!