8 replies

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

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

<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

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

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

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

Similar Threads

Similar Threads

Similar Threads