css e/o javascript cambiare sfondo all'immagine clic

Question

Ho un problema in cui ho un div class="tasteTheRainbow" e all'interno sono i tag img. Un tag in particolare è una classe png denominata .gA3.

Ora l'tasteTheRainbow ha già un URL di sfondo css ma quando si tocca o si fa clic su .gA3 voglio che l'URL di sfondo cambi.

Ho provato molti altri post StackOverflow e non ho trovato alcuna soluzione.

Ecco il mio HTML e la mia CSS:

<div class="tasteTheRainbow"> 
    <div class="greenArrow"> 
     <img class="gA1" src="assets/arrows/down.png"/> 
     <img class="gA2" src="assets/arrows/in.png"/> 
     <img class="gA3" src="assets/arrows/left.png"/> 
     <img class="gA4" src="assets/arrows/out.png"/> 
     <img class="gA5" src="assets/arrows/right.png"/> 
     <img class="gA6" src="assets/arrows/up.png"/> 
    </div> 
</div> 

.tasteTheRainbow { 
    background-image: url(../assets/fivePix.png); 
    background-repeat: repeat; 
    position: absolute; 
    background: url(../assets/tombrady1.jpg) no-repeat center center fixed !important; 

    -webkit-background-size: cover; 
    background-size: cover; 
    display: block !important; 
} 

Come ho già detto ho provato con i CSS classname:active. Ho anche provato più soluzioni di script java e semplicemente non cambiano l'URL di background in image1 in image2.

Answer 1

La mia soluzione consigliata è creare una classe CSS sia per lo stato iniziale dell'elemento (esempio .tasteTheRainbow) sia per il nuovo stato (esempio .tasteTheRainbowNew), quindi utilizzare Javascript per applicare/rimuovere la classe.

$(function() { 
    $(".gA3").click(function() { 
     $(this).parent(".tasteTheRainbow").toggleClass("tasteTheRainbowNew"); 
    }); 
}); 

Vedi il mio JSfiddle qui: http://jsfiddle.net/oxv0rc1k/2/

Si noti inoltre che ho caricato in JQuery perché la mia JS fa schifo senza di essa.