css - 使用 CSS 隐藏/显示在 Chrome 中不显示内容

Question

如果有人能帮助我，我将不胜感激。我正在努力寻找答案。

我无法使此显示/隐藏代码在 Chrome 中正常工作。单击时不显示内容。它在 IE 和 Firefox 中完美运行。

Fiddle

 .hide {display: none;
 }
 #list {display: none;
 }
  .show:focus { display: none;
 }
  .show:focus + .hide {display: inline;
 }
  .show:focus ~#list{ display:block;
 }






<a href="#" class="show" tabindex="2">show</a>
            <a href="#" class="hide" tabindex="1">hide</a>      
<div id="list">
      Content here
    </div>

Answer 1

试试这个，应该可以正常工作。

       <span class="span3" tabindex="0">Hide Me</span>
        <span class="span2" tabindex="0">Show Me</span>
         <p class="content" >My content here</p>

CSS

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