Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
8 replies
thethingisback

<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>


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?
Screenshot_2024-04-26_at_9.34.45_AM.png
Was this page helpful?