<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

This is the relevant portion of the return:
<ul className="quickLink_list">
<li>
<a href="/" className="footer_link footer_quickLinks">
<Image
className="footer_icon quickLink_img"
src={home_icon}
alt="home icon"
/>
Home
</a>
</li>

<li>
<a
href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
target="_blank"
className="footer_link footer_quickLinks"
>
<Image
className="footer_icon quickLink_img"
src={locations_icon}
alt="locations icon"
/>
Locations
</a>
</li>
<ul className="quickLink_list">
<li>
<a href="/" className="footer_link footer_quickLinks">
<Image
className="footer_icon quickLink_img"
src={home_icon}
alt="home icon"
/>
Home
</a>
</li>

<li>
<a
href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
target="_blank"
className="footer_link footer_quickLinks"
>
<Image
className="footer_icon quickLink_img"
src={locations_icon}
alt="locations icon"
/>
Locations
</a>
</li>
The problem one is the second <a/>. My CSS is aplying an animation such that when the .footer_link (each <a/>) is hovered, its child .footer_icon (thie <Image/>) has an animation applied to it.
.footer_link:hover .footer_icon { animation: iconAnimation .4s ease-in-out; transform-origin: center; }
I noticed the second <Image/> icon here was refusing to animate, so I inspected, and then I discovered that its parent <a/> is being rendered without any of these react classNames I assigned it, but somehow is getting a button class applied to it, which I have no idea where that's coming from --- see the picture for the inspector rendering. So basically the animation isn't happening because there's this weird intervening re-assignment of class "button" to that <a/>. All of the other .footer_icon's are retaining my classNames when rendered and their animations are working. What could be going on here?
No description
7 Replies
MarkBoots
MarkBoots5w ago
did you try restarting the server / hard refresh the browser?. Maybe it's cached
thethingisback
yea just tried that, still getting this 'button' class in the browser somehow. this is my component return right now:
<li>
<a href="/" className="footer_link footer_quickLinks">
<Image
className="footer_icon quickLink_img"
src={home_icon}
alt="home icon"
/>
Home
</a>
</li>

<li>
<a
className="footer_link footer_quickLinks"
href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
target="_blank"
>
<Image
className="footer_icon quickLink_img"
src={locations_icon}
alt="locations icon"
/>
Locations
</a>
</li>
<li>
<a href="/" className="footer_link footer_quickLinks">
<Image
className="footer_icon quickLink_img"
src={home_icon}
alt="home icon"
/>
Home
</a>
</li>

<li>
<a
className="footer_link footer_quickLinks"
href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
target="_blank"
>
<Image
className="footer_icon quickLink_img"
src={locations_icon}
alt="locations icon"
/>
Locations
</a>
</li>
thethingisback
.footer_quickLinks is getting applied to the other elements, as well as the .footer_link, to the other elements, but not to the problem one
No description
MarkBoots
MarkBoots5w ago
it's also missing the href in the rendered html
thethingisback
yea, i just removed it on purpose to test
MarkBoots
MarkBoots5w ago
is it possible to make a sandbox
thethingisback
Nevermind, I found it, was in the wrong file LOL Thank you, apologies for that. I'll delete the post.