Come cambiare il colore della png al passaggio del mouse?

Question

Ho fatto una "freccia in giù" in Illustrator e l'ho salvata come una PNG con uno sfondo trasparente. Quando lo metto nella mia pagina web come img, appare nel colore originale, che è ok. Sto cercando di fare

img:hover{color:red;} 

e non funziona.

Qualcuno sa come farlo funzionare?

Grazie

Answer 1

Se si target i browser moderni, è possibile utilizzare CSS filters.

Il filtro hue-rotate è adatto per i colori che cambiano:

filter: hue-rotate(180deg); 
-webkit-filter: hue-rotate(180deg); 

L'importo esatto di gradi dipende dalla vostra immagine e risultati attesi.

Si noti che i filtri CSS sono una nuova funzionalità e il suo browser support is limited.

---

In alternativa, è possibile utilizzare CSS sprites tecnica, che funziona in tutti i browser di età ragionevole.

Answer 2

Applicando:

{color:red} 

a qualsiasi elemento significa cambiare il colore del testo.

Prova a cambiare:

img:hover {color:red} 

a:

img:hover {background-image: url('<insert url to red arrow here>');} 

e questo funziona se si dispone di una sola immagine. Se hai molte immagini e vuoi che solo una cambi al passaggio del mouse, quindi imposta un ID per l'immagine che desideri modificare e cambia img e img: passa con il mouse su #x e #x: passa sopra e sostituisci x con il nome che hai dato per l'ID.

Ecco un esempio (si presuppone altro HTML è intatto e formattata correttamente):

<style type="text/css"> 
#abc:hover {background-image: url('redarrow.png');} 
</style>  
<img ID="abc" src="normalarrow.png"> 

Answer 3

Quello che dovete fare è impostare l'immagine come sfondo-immagine utilizzando i CSS. Quindi imposta uno stato di passaggio del mouse usando un'altra versione dell'immagine (con un colore diverso). Per esempio:

.element { 
    background-image: url(your-image.png); 
} 

.element:hover { 
    background-image: url(your-image-hover-version.png); 
} 

A seconda di dove si sta mettendo l'immagine/di classe, è necessario assegnare adeguata altezza/larghezza (o utilizzando padding).

Answer 4

È possibile modificare il colore dell'immagine con un'immagine identica di un altro colore con un evento (come hover).

html:

<div id="cf"> 
    <img class="bottom" src="/images/Windows%20Logo.jpg" /> 
    <img class="top" src="/images/Turtle.jpg" /> 
</div> 

css:

#cf { 
     position:relative; 
     height:281px; 
     width:450px; 
     margin:0 auto; 
    } 

    #cf img { 
     position:absolute; 
     left:0; 
     -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
     -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
    } 

    #cf img.top:hover { 
     opacity:0; 
    } 

In dettaglio qui: http://css3.bradshawenterprises.com/cfimg/