Hover Hintergrundbild ändern auf Checkbox Bereich

Question

Ich versuche, eine Möglichkeit zu finden, das Hintergrundbild zu ändern, wenn ich über meine Checkbox-Bereich schwebe (ich musste es aufgrund von Firefox-Problemen so bauen).

Immer wenn ich einen: Hover-Zustand hinzufüge, ignoriert es es einfach?

Ich habe eine Kopie meiner aktuellen Code erstellt: https://jsfiddle.net/vf21xxba/

Jede der divs haben haben ein anderes Symbol von id und die Bilder werden auch auf schweben unterschiedlich sein.

label.checkbox input[type="checkbox"] {  display:none; } 

label.checkbox span{ position: relative; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 50%; display:inline-block; border-radius: 100px; transition: all 0.5s; cursor: pointer; width: 75px; height: 75px; background:#262626; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 50%;   } 

label.checkbox span#pa { background-image: url('../img/icons/party-animal.png'); } 

label.checkbox :checked + span#pa { background-color: #ea2e49; } 


<label class="checkbox"><input type="checkbox" value=".pa" id="pa" class="initPa"><span id="pa"></span></label> 

So wie die ‚geprüft‘ sate ich muß für jede Spanne mit einer ID mit einem anderen Hintergrundbild ein Hover sate hinzuzufügen.

Answer 1

Lassen Sie das + out

https://jsfiddle.net/vf21xxba/3/

label.checkbox :checked + span#pa, label.checkbox:hover span#pa { 
    background-color: #ea2e49; 
    background-image: url('http://icons.iconarchive.com/icons/zerode/plump/128/Search-icon.png'); 
}