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

<a/>

.

My CSS is aplying an animation such that when the

.footer_link

.footer_link

(each

<a/>

<a/>

) is hovered, its child

.footer_icon

.footer_icon

(thie

<Image/>

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

<Image/>

icon here was refusing to animate, so I inspected, and then I discovered that its parent

<a/>

<a/>

is being rendered without any of these react classNames I assigned it, but somehow is getting a

button

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

<a/>

.

All of the other

.footer_icon

.footer_icon

's are retaining my classNames when rendered and their animations are working.

What could be going on here?

MarkBoots•4/26/24, 2:43 PM

did you try restarting the server / hard refresh the browser?. Maybe it's cached

thethingisbackOP•4/26/24, 2:45 PM

yea just tried that, still getting this 'button' class in the browser somehow.

thethingisbackOP•4/26/24, 2:47 PM

this is my component return right now:

thethingisbackOP•4/26/24, 2:49 PM

.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

MarkBoots•4/26/24, 2:50 PM

it's also missing the href in the rendered html

thethingisbackOP•4/26/24, 2:50 PM

yea, i just removed it on purpose to test

MarkBoots•4/26/24, 2:51 PM

is it possible to make a sandbox

thethingisbackOP•4/26/24, 2:58 PM

Nevermind, I found it, was in the wrong file LOL

Thank you, apologies for that. I'll delete the post.