htmlcsssvgeffectsuser-experience

Hover effect affecting both SVG icon and text content in a HTML link element

Let's say I have the following HTML:

<a href="#">
 <svg class="icon">
 <!-- SVG content -->
 </svg>
 Link text
</a>

And the following CSS:

a:hover {
  color: #0074D9;
}

icon:hover {
  fill: #0074D9;
}

Now I want a hover effect (let's say a color change) that acts on the whole a group. That is, the user should see both the icon and the text changing color when hovering over the a element.

Something like this (from the Instapaper website):

instapaper

Right now, using the markup and the style rules above, i'm only able to get this on Chrome:

myapp

Hovering over the text doesn't affect the icon. Hovering over the icon works:

myapp2

Seems like a trivial task but after some failed attempts I realized that I'm probably missing something.

Solution

  • Found the answer on SO right after I posted my question...

    Basically I need to "set the color of the icon class that is inside a hovered a element".

    So this works for me:

    a:hover .icon {
  fill: $0074D9;  
}