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