Imagine you have the following HTML structure:
<a href="#">
<svg class="icon">
<!-- SVG content -->
</svg>
Link text
</a>
And this CSS styling:
a:hover {
color: #0074D9;
}
.icon:hover {
fill: #0074D9;
}
Now, the goal is to create a hover effect that changes the color of both the icon and the text when hovering over the entire a element.
Here's an example similar to what you might see on the Instapaper website:
Currently, with the given markup and styles, I'm only able to achieve this effect in Chrome:
Hovering over the text doesn't impact the icon, but hovering over the icon does work:
While it may seem like a simple task, after some unsuccessful attempts, it's clear that something crucial is missing.