Solved

How To Change 'X' Color By Hovering Mouse Over 'X'? (Dawn)

milkandcookies
Excursionist
417 0 49

Hi,

How can I change the color of the "X" below when I house my mouse over it?

milkandcookies_0-1707768775455.png

 

https://www.pop--shop.com/products/signature-25-pack-pop-box

thanks in advance

 

Accepted Solution (1)

Spac-es
Shopify Partner
300 90 114

This is an accepted solution.

1º Add this code in your base.css file: 

button.drawer__close:hover svg,
a#icon-cart-close:hover svg{
  color: lightgreen !important;
}

button.drawer__close svg,
a#icon-cart-close svg{
  color: white !important;
}

(The first color is for the hover effect, and the second one is the default color without the hover effect)

 

 

 

2º Remove 'color: #fff!important;' from the base.css file (line 3745). The code should resemble something like this:

@media (prefers-reduced-motion: no-preference) and (hover: hover)
.drawer__inner * {
  color: #fff!important;
  font-family: BauhausSkayDisplay-Black;
}

 

View solution in original post

Reply 1 (1)

Spac-es
Shopify Partner
300 90 114

This is an accepted solution.

1º Add this code in your base.css file: 

button.drawer__close:hover svg,
a#icon-cart-close:hover svg{
  color: lightgreen !important;
}

button.drawer__close svg,
a#icon-cart-close svg{
  color: white !important;
}

(The first color is for the hover effect, and the second one is the default color without the hover effect)

 

 

 

2º Remove 'color: #fff!important;' from the base.css file (line 3745). The code should resemble something like this:

@media (prefers-reduced-motion: no-preference) and (hover: hover)
.drawer__inner * {
  color: #fff!important;
  font-family: BauhausSkayDisplay-Black;
}