画像をリンクとして使用、同時にクリックすると隠す/置き換える

Question

画像をリンクとして使用しようとしていますが、同時にクリックすると別の画像と交換しています。 （基本的に、ユーザーがボタンをクリックするとボタンが押されたように見せたい）ここに私のコードです：

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; 
} 

問題は、私は非表示にする得ればリンクはもう機能していないを#nonpressedということです。私はhide/showを試みてjQueryに置き換えましたが、それは本当に役に立たなかったのです。（まあ、たぶん私はちょうど私がウェブデザインを始めたからです。どのように私はこの仕事をすることができるかについての任意のアイデア？どうもありがとうございました！！

Answer 1

イメージを変更したい場合は、リンク全体を変更する必要はありません。背景画像のプロパティを使用すると非常に簡単です。だから、あなたが非表示にする場合は/全体（img）リンクを表示...唯一のソリューションいずれかの方法で

.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>

CSSだdisplay: none;とdisplay: block;てみてください。また、アイテムをクリックして非表示にすると、そのアイテムをクリックしても、そのアイテムをクリックしてもそれを隠しているということは分かりません...理由は、wrapperを追加する必要があります。以下のようなので、それは動作します：

.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>