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

Question

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

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

小提琴

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