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

7 Replies

MarkBoots•8mo ago

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

thethingisbackOP•8mo ago

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>

thethingisbackOP•8mo ago

.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•8mo ago

it's also missing the href in the rendered html

thethingisbackOP•8mo ago

yea, i just removed it on purpose to test

MarkBoots•8mo ago

is it possible to make a sandbox

thethingisbackOP•8mo ago

Nevermind, I found it, was in the wrong file LOL Thank you, apologies for that. I'll delete the post.

Gaming

Programming

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