Hover al passaggio del mouse

daniele.g

Hover al passaggio del mouse

Buonasera a tutti, sono da un po che mi sto scervellando con un css.

Ho il seguente tasto su woocommerce, il pulsante del Checkout:

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: #D3B574;
color: #fff;
font-size: 1.4em !important;
text-transform:uppercase;
width: 100%;

-webkit-font-smoothing: antialiased;

}

Con il codice personalizzato sono riuscito a renderlo maiuscolo e più grande.

Ora però il template di suo ha un colore poco soddisfacente. Come posso cambiare il colore al passaggio del mouse?

Che codice dovrei inserire?

Grazie anticipatamente a chi volesse rispondermi.

flaviors200

Utilizza la pseudo classe :hover
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

daniele.g

Si, ma non saprei come integrarlo in questo caso specifico

flaviors200

Es.

[HTML]
.woocommerce a.button.alt:hover {
color:red;
}
[/HTML]

e così per gli altri elementi. Praticamente puoi copiarti il CSS che hai postato, ogni elemento lo fai seguire da :hover e tra parentesi graffe metti la regola del colore

daniele.g

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background-color: #D3B574;
color: #fff;
font-size: 1.4em !important;
text-transform:uppercase;
width: 100%;

}

Grazie della risposta, ho provato ma non ci sono riuscito. Mi crea un errore e mi cancella tutte le impostazioni.

flaviors200

Non saprei aiutarti perché non uso WP, ci dovrebbe essere la sezione editor per apportare modifiche al codice compresi i fogli di stile.

Devi solamente aggiungere questa regola

[HTML]
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
color: red;
}
[/HTML]

metti il colore che desideri.

daniele.g

Grazie sono riuscito inserendo il codice come mi hai suggerito.