Attempting to create a hover effect on a link with an SVG as a child element. Desire to alter the stop-color of the svg when hovering over the link.
Encountering issue where all the SVG icons change stop color when hovering specifically over the first .link element. However, if hovering over the second or third .link element, the stop color remains unchanged. Seeking a resolution without needing extra classes or JavaScript in the SVG component.
Issue: https://i.sstatic.net/jAuwe.png
Hovering over the first one: https://i.sstatic.net/bI55U.png
Hovering over the second one: https://i.sstatic.net/B2wc0.png
The CSS class is defined using scss and appears as follows:
.link {
& defs stop:first-child {
stop-color: #393896;
}
& defs stop:last-child {
stop-color: #181735;
}
&:hover defs stop:first-child {
stop-color: #ffbbcc;
}
&:hover defs stop:last-child {
stop-color: #0000ff;
}
&:hover {
background-color: red; // test to see if the css selector is working
}
}
SVG code:
<svg width="1em" height="1em" viewBox="0 0 84 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.977 0.397949C19.37 0.397949 0.869995 18.323 0.869995 40.242C0.869995 70.122 41.977 114.232 41.977 114.232C41.977 114.232 83.084 70.121 83.084 40.242C83.084 18.323 64.585 0.397949 41.977 0.397949ZM41.977 54.4689C40.0722 54.5265 38.1752 54.2011 36.3984 53.5119C34.6217 52.8227 33.0015 51.7838 31.6337 50.4568C30.266 49.1297 29.1786 47.5416 28.436 45.7865C27.6935 44.0315 27.3108 42.1452 27.3108 40.2394C27.3108 38.3337 27.6935 36.4474 28.436 34.6924C29.1786 32.9373 30.266 31.3492 31.6337 30.0221C33.0015 28.6951 34.6217 27.6562 36.3984 26.967C38.1752 26.2778 40.0722 25.9524 41.977 26.0099C43.8818 25.9524 45.7788 26.2778 47.5555 26.967C49.3323 27.6562 50.9525 28.6951 52.3203 30.0221C53.688 31.3492 54.7754 32.9373 55.518 34.6924C56.2605 36.4474 56.6431 38.3337 56.6431 40.2394C56.6431 42.1452 56.2605 44.0315 55.518 45.7865C54.7754 47.5416 53.688 49.1297 52.3203 50.4568C50.9525 51.7838 49.3323 52.8227 47.5555 53.5119C45.7788 54.2011 43.8818 54.5265 41.977 54.4689" fill="url(#paint0_linear_1_4257)" />
<defs>
<linearGradient id="paint0_linear_1_4257" x1="41.977" y1="0.397949" x2="41.977" y2="114.232" gradientUnits="userSpaceOnUse">
<stop stopcolor="currentColor" />
<stop offset="1" stopcolor="currentColor" />
</linearGradient>
</defs>
</svg>
The HTML structure looks like this:
<div id="main">
<a class="link">
<svg ... />
</a>
<a class="link">
<svg ... />
</a>
</div>
Hoping for a solution that is also compatible with scss module in a react project. Appreciate any help!