Apply css mit Fokus auf eine eigene Klasse

Question

Ich möchte die CSS mit Fokus-Selektor auf eine eigene Klasse anwenden. Ich möchte nur die Klasse der Fokussierung verstecken. Hier ist mein Codeausschnitt.

body { 
 
    display: block; 
 
} 
 
.span3:focus ~ .alert { 
 
    display: none; 
 
} 
 
.span2:focus ~ .alert { 
 
    display: block; 
 
}

<span class="span3" tabindex="0">Hide Me</span> 
 
<span class="span2" tabindex="0">Show Me</span> 
 
<p class="alert">Some alarming information here</p>

Answer 1

Ich denke, es ist die Antwort auf Ihre Frage ist, sollten Sie Javascript verwenden. Ein kleines Skript, und löschen Sie einige Zeilen von CSS.

https://jsfiddle.net/prsebqg3/

---

html-Datei

<span id="span3" tabindex="0">Hide Me</span> 
<span id="span2" tabindex="0">Show Me</span> 
<p id="alert" >Some alarming information here</p> 

<script> 
    document.getElementById("span3").onclick = function() {functionHide()}; 

    function functionHide() { 
     document.getElementById("span2").style.display = "block"; 
     document.getElementById("span3").style.display = "none"; 
     document.getElementById("alert").style.display = "none";  
    } 

    document.getElementById("span2").onclick = function() {functionShow()}; 

    function functionShow() { 
     document.getElementById("span2").style.display = "none"; 
     document.getElementById("span3").style.display = "block"; 
     document.getElementById("alert").style.display = "block";  
    } 
</scrip> 

CSS-Datei

#span2{ 
    display:none; 
}