Bild als Link verwenden, ausblenden/ersetzen, wenn gleichzeitig geklickt wird

Question

Ich versuche, ein Bild als Link zu verwenden und gleichzeitig mit einem anderen Bild auszutauschen, wenn gleichzeitig geklickt wird. (Grundsätzlich soll es so aussehen, als ob eine Schaltfläche gedrückt wird, sobald der Benutzer darauf klickt). Hier ist mein Code:

HTML

<a class="button" id="nonpressed" href="..."><img src="images/nonpressed.png"/></a> 
<a class="button" id="pressed" href="..."><img src="images/pressed.png"/></a> 

CSS

.button { 
position: absolute; 
top: 540px; 
left: 90px; 
} 

#nonpressed { 
z-index: 2; 
} 

#nonpressed:active { 
visibility: hidden; 
} 

#pressed { 
z-index: 1; 
} 

Das Problem ist, dass wenn ich zu verbergen bekommen #nonpressed der Link funktioniert nicht mehr. Ich habe versucht, zu verstecken/zu zeigen und durch jQuery zu ersetzen, aber es half auch nicht wirklich .. (nun, vielleicht habe ich es einfach vermasselt, da ich erst mit dem Webdesign anfange--). Irgendwelche Ideen, wie ich das schaffen könnte? Vielen Dank!!

Answer 1

Sie müssen den gesamten Link nicht ändern, wenn Sie nur das Bild ändern möchten. Es ist sehr einfach mit der Verwendung der Hintergrundbild-Eigenschaft. So ist es nur CSS-Lösung ...

.button { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url(http://lorempixel.com/400/200/sports/1/); 
 
    background-size: 100px 100px; 
 
} 
 

 
.button:active { 
 
    background-image: url(http://lorempixel.com/400/200/sports/2/); 
 
}

<a class="button" href="#"></a>

So oder so, wenn Sie ausblenden möchten/zeigen die gesamte (img) Link versuchen mit display: none; und display: block;. Dann müssen Sie auch eine wrapper Ursache hinzufügen, wenn Sie auf das Element klicken und es ausblenden, dann ist es weg und nichts wird wissen, dass Sie immer noch darauf klicken, weil Sie es verstecken ... macht das Sinn? Wie so funktioniert es:

.button { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 

 
#nonpressed, 
 
#pressed:active { 
 
    display: none; 
 
} 
 

 
.wrap:active #nonpressed { 
 
    display: block; 
 
}

<div class="wrap"> 
 
<a class="button" id="nonpressed" href="#"><img src="http://lorempixel.com/400/200/sports/2/"/></a> 
 
<a class="button" id="pressed" href="#"><img src="http://lorempixel.com/400/200/sports/1/"/></a> 
 
</div>