将css应用于自己的类

时间:2016-09-27 13:14:00

标签: html css3

我想在自己的类中应用带焦点选择器的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>

1 个答案:

答案 0 :(得分:0)

我认为这是你问题的答案,你应该使用javascript。一个小脚本,删除一些css行。

https://jsfiddle.net/prsebqg3/

html文件

C:\Users\Anil>java -version
java version "1.8.0_91"
Java(TM) SE Runtime Environment (build 1.8.0_91-b15)
Java HotSpot(TM) 64-Bit Server VM (build 25.91-b15, mixed mode)

css文件

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