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.

Next lesson: CurrentColor

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies