將焦點應用於自己的類

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