Ändern Sie das Logo in Farbe auf Hover

Question

Ich verwende ein WordPress-Theme namens Vigor. Ich fragte mich, ob ich mein Logo in Graustufen haben könnte, und sobald ich über das Logo schwebte, würde es sich in eine Farbversion verwandeln. Wie kann das gemacht werden? In meinem Themenmenü habe ich einen Platz für benutzerdefiniertes CSS und jQuery. Ich habe auch beide Versionen in einem PNG.

Answer 1

Ja, das ist möglich! Keine Notwendigkeit für separate PNG-Bilder.

können Sie den folgenden Code verwenden, mit CSS-Filter:

HTML:

<img id="logo" src="http://lorempixel.com/400/200/"> 

CSS:

#logo { 
    -webkit-filter: grayscale(100%); 
    -webkit-transition: .5s ease-in-out; 
    -moz-filter: grayscale(100%); 
    -moz-transition: .5s ease-in-out; 
    -o-filter: grayscale(100%); 
    -o-transition: .5s ease-in-out; 
} 

#logo:hover { 
    -webkit-filter: grayscale(0%); 
    -webkit-transition: .5s ease-in-out; 
    -moz-filter: grayscale(0%); 
    -moz-transition: .5s ease-in-out; 
    -o-filter: grayscale(0%); 
    -o-transition: .5s ease-in-out; 
} 

JSFiddle example

Answer 2

Sie können tun es so

#logo:hover { background-image:url('color-1.png') }

#logo { background-image:url('color-2.png') }

Answer 3

Sie können die CSS 3 Filter verwenden. Versuche dies.

https://jsfiddle.net/1fog16gn/

#sampleImage { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
} 

#sampleImage:hover { 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
} 

Answer 4

Ich habe diese das jQuery-Plugin wurde mit: https://github.com/karlhorky/gray für Bilder Graustufen. Es ist einfach zu bedienen und zu implementieren, da Sie nur Graustufen Klasse zu einem Bild oder Graustufen Graustufen-Fade für Hover-Effekt hinzufügen müssen. Ich habe dieses Plugin in may-Projekten verwendet, weil die css-Filter nicht in allen Browsern funktionieren, hauptsächlich im Internet-Explorer, und ich habe viele Graustufen-Plugins überprüft, um die zu finden, die wirklich funktioniert und an der ich festhalte dieses.

Hoffe es hilft