Utilize a different icon on CTA when hover

Search
1

Hi Community.

I have an icon in the CTA that conflicts to hover color. I would like to change the icon when hovering to a white icon.

To do so, I have added the code
.HitchhikerLocationStandard-primaryCTA{
.HitchhikerCTA .Icon-image:hover{
background-image: url(“https://a.mktgcdn.com/p/_xR_ltll-9VTgHaHtRXLTiWrwzZpA8ZZB9w_Tkrn4tI/22x22.png”);
}
}

My standard CTA styling is
.HitchhikerCTA{
color: #900E27;
border: 1px solid;
text-transform: uppercase;
padding: 13px 16px;
letter-spacing: 2px;
font-size: 16px;
border-radius: 3px;
text-decoration: none;
}
.HitchhikerCTA:hover{
color: #ffffff;
background-color: #900E27;
}
.HitchhikerCTA-iconLabel{
white-space: normal;
width: 150px;
text-transform: uppercase;
}

With this setup, the hover however only works in the icon and not the CTA

Any thoughts?

Lucas B

2

Hey Lucas,

Great question! My understanding is that you’d like to change the color of the icon when hovering anywhere within the CTA, not just when hovering on the icon itself. This is definitely possible! Here is an example of how you could make this work:

.HitchhikerLocationStandard-primaryCTA:hover .HitchhikerCTA-icon {
  color: white;
}

Since the icon class is a descendant of the CTA’s class, you can simply put a space between the icon class selector and the CTA selector. In this case, I’ve added :hover to the CTA’s selector to ensure this icon styling is only applied on CTA hover.

Best,
DJ

3

Hi DJ.

Thank you very much for the support.

This definitely helped, in my case what I was also missing was the format of the Icon, which had to be svg instead of png.

Lucas B

1 Like