将焦点应用于自己的类

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