CSSと限定されたJavaScriptに焦点を当てたポップアップ画像を作成する

Question

限定されたJavaScriptでポップアップ画像を作成する方法を探してきました。私はCSSのみのソリューションを見つけましたが、この設定では "ホバー"と "アクティブ"は機能しません。私は、 "onclick"ソリューションが必要ですが、タスクはより多くのCSSに焦点を当てています。

できるだけこのように見えるように仕上げた結果が必要ですが、onlickで有効ではありません。

HTML：

<div id="thumbwrap"> 
<a class="thumb"><img src="telefon.png" style="height: 200px; 
width: 126px;" alt="Hvordan ringe" onclick="myFunction()"><span> 
<img src="telefon.png" style="height: 500px; width: 315px;" alt=""> 
</span></a> 
</div> 

CSS：

#thumbwrap { 
position: relative; 
margin: 75px; 
} 

.thumb img { 
border: 1px solid #000; 
margin: 3px; 
float: left; 
height: 400px; 
width: 250px; 
} 

.thumb span { 
position: absolute; 
visibility: hidden; 
margin-left: -100px; 
} 

.thumb:active, .thumb:active span { 
visibility: visible; 
top: 0; 
left: 250px; 
z-index: 1; 
} 

Answer 1

あなたのアクティブなセレクタが、ここでこのようにする必要があります。 :active疑似クラスを使用して、現在のソリューションを置き換えるの

.thumb img:active { 
border: 1px solid #000; 
margin: 3px; 
float: left; 
height: 400px; 
width: 250px; 

}

Answer 2

最も簡単な方法は、クラスに現在:active疑似クラスに設定されているCSSルールを変更することです（私はそれを呼んでいますできるだけ元のコードに近いものを維持するために.active）。

あなたは、単に次のようにJavaScriptを使用してサムネイルをオン/オフするクラスをトグルする必要があります。

var thumbs = document.getElementsByClassName("thumb"); 

for (var i = 0; i < thumbs.length; i++) { 
    thumbs[i].addEventListener("click", showBigImage); 
} 

function showBigImage() { 
    if (this.className.indexOf("active") > -1) { 
     this.className = this.className.replace(" active", ""); 
    } 
    else { 
     this.className = this.className + " active"; 
    } 
} 

あなたはここに掲載のコードを使用して、完全なフィドルがあります：https://jsfiddle.net/stecag24/