SVG hover effects
Add hover effects to SVG elements.
Hover on SVG
SVG elements respond to the :hover pseudo-class just like normal HTML elements. When the cursor enters an icon, its color can change, its line can thicken.
There are two ways to do this: target the whole SVG with .icon:hover, or reach inside with .icon:hover circle. The second is useful for complex icons made of several parts.
Changing fill on hover
The most common hover effect is to change the icon's inside color. When the cursor is over it, you rewrite the fill property.
Example: .btn svg { fill: #94a3b8 } makes the icon gray; .btn:hover svg { fill: #2563eb } turns it blue on hover. This small touch makes the button feel alive.
Exercise Turn the icon blue on hover
Inside the .icon:hover selector, add a fill declaration with the value #2563eb. The inside color turns blue when the cursor is over the icon.
Show example solution
open .icon:hover and write fill: #2563eb; inside.
Example solution:
.icon:hover {
fill: #2563eb;
}Test yourself
-
Which pseudo-class creates a hover effect?
- :active
- :focus
- :hover
- :checked
Show answer
:hover — Correct! :hover matches when the cursor is over the element.
-
Change the edge color on hover
.icon:hover { ____: #dc2626; }Show answer
.icon:hover { stroke: #dc2626; } -
Which is a valid hover declaration?
- .icon hover { fill: #2563eb }
- .icon::hover { fill: #2563eb }
- .icon:hover fill: #2563eb
- .icon:hover { fill: #2563eb }
Show answer
.icon:hover { fill: #2563eb } — Correct! :hover is written with a single colon; the declaration goes inside braces.