Ajuda em Icones Menu - CSS

Boa noite pessoal, tudo bem com vocês? :v:

Estou com um problema, na verdade uma dúvida e preciso da ajuda de vocês. :cold_sweat:

É o seguinte, estou colocando icones no meu menu, consegui colocar, fui seguindo alguns tópicos daqui da comunidade mesmo que o pessoal ajudou e deu certo, o problema é que eu não estou conseguindo fazer com que meu icone mude (do icone branco para o rosa) quando o mouse passa sobre o botao, segue meu site em manutenção abaixo e o código que estou utilizando: :point_down:

Site: https://ella-personnalite-manutencao.lojaintegrada.com.br/

Código:

/–ANÉIS–/
/–branco–/
.categoria-id-1723736.com-filho.borda-principal {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/anel.png) left no-repeat;
color: transparent;
}
/–rosa–/
.categoria-id-1723736.com-filho.borda-principal:hover {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/anel-rosa.png) left no-repeat;
color: transparent;
}

/–BRINCOS–/
/–branco–/

.categoria-id-1723744.com-filho.borda-principal {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/brinco2.png) left no-repeat;
color: transparent;
}
/–rosa–/
.categoria-id-1723744.com-filho.borda-principal:hover {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/brinco-rosa.png) left no-repeat;
color: transparent;
}

/–COLARES–/
/–branco–/
.categoria-id-1723917.com-filho.borda-principal {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/colar2.png) left no-repeat;
color: transparent;
}
/–rosa–/
.categoria-id-1723917.com-filho.borda-principal:hover {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/colar-rosa1.png) left no-repeat;
color: transparent;
}

/–PULSEIRAS–/
/–branco–/
.categoria-id-1723931.com-filho.borda-principal {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/pulseira.png) left no-repeat;
color: transparent;
}
/–rosa–/
.categoria-id-1723931.com-filho.borda-principal:hover {
background: url(https://cdn.awsli.com.br/496/496628/arquivos/pulseira-rosa.png) left no-repeat;
color: transparent;
}

Como vocês podem observar, os icones já estão todos no código CSS, desde já agradeço! :slight_smile:

1 Curtida

Tem outro problema que estou passando também, quando você vê pelo menu MOBILE ou em uma janela muito pequena no navegador, os ícones ficam todos encavalados. Notei que no seu site também está assim.