In my SVG checkbox design, I have a circle element surrounding a polyline element (which acts as the checkmark). The boundaries of the icon extend beyond the circle, causing hover styles to trigger even when hovering outside the circle. I want to change styles only when hovering over the circle itself, but I need both the circle and polyline to change on hover. I am using styled-components.
I have tried various methods to make the polyline change when the circle is hovered over.
Initially, I attempted:
& circle:hover circle, & circle:hover polyline { }
and similar variations. Eventually, I converted the circle and polyline elements into styled components for easier manipulation. Following a solution from this post, I tried this approach:
const Circle = styled.circle``;
const Polyline = styled.polyline``;
const Icon = styled.svg`
width: 52px;
height: 52px;
& ${Circle}, ${Polyline} {
fill: #fff;
stroke: ${props => props.logged ? colors.secondary200 : colors.secondary400};
& ${Circle}:hover {
stroke: ${colors.secondary400};
fill: ${colors.secondary400};
}
& ${Circle}:hover ${Polyline} {
stroke: #fff;
fill: ${colors.secondary400};
}
However, the polyline still does not change when hovering over the circle. I also tried nesting:
& ${Circle}:hover {
stroke: ${colors.secondary400};
fill: ${colors.secondary400};
& ${Polyline} {
stroke: #fff;
fill: ${colors.secondary400};
}
}
None of these solutions seem to be effective. How should I properly select the polyline element?
EDIT: Upon reviewing the styled-components documentation, I realized it might be more appropriate to handle the styling within the Polyline component. Therefore, I tried the following:
const Polyline = styled.polyline`
pointer-events: none;
fill: #fff;
stroke: ${props => props.logged ? colors.secondary200 : colors.secondary400};
${Circle}:hover & {
stroke: #fff;
fill: ${colors.secondary400};
}
`;
Despite this attempt, the desired effect is still not achieved. However, strangely enough, ${Icon}:hover & { } works for some reason. I cannot use it because the Icon's boundaries exceed the circle, though. I am puzzled as to why the Polyline responds to hovering over the Icon but not the Circle. While the Circle clearly receives a hover event since its own hover styles apply, it seems that the Polyline ignores it.
View the JSFiddle here