独自のクラスに焦点を当てたCSSを適用する

Question

フォーカスセレクタ付きのCSSを独自のクラスに適用したいと思います。私はそれだけでフォーカスのクラスを非表示にしたくない。ここに私のコードスニペットがあります。

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

私はJavaScriptを使用する必要があり、それはあなたの質問への答えだと思います。少しのスクリプト、およびCSSのいくつかの行を削除します。

https://jsfiddle.net/prsebqg3/

---

htmlファイル

<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ファイル

#span2{ 
    display:none; 
}