显示仅使用css隐藏div（无输入或tabindex）

Question

我一直在寻找一段时间，我似乎无法找到问题的答案。

我需要使用CSS进行隐藏/显示功能。点击header.title后，我需要显示div，再次点击它时，它会消失。 对于一些（超出主题）原因我无法编辑HTML，因此输入或tabindex不是一个选项。

<aside>
  <header class="title">
    <h2>Title</h2>
  </header>

  <div class="content">
    Some information here
  </div> 
</aside> 

我甚至不知道这是否可行，如果没有，请告诉我。

Answer 1

您不能仅使用CSS永久更改DOM元素。因此，如果用户将手指从鼠标移开，则样式将恢复。

Answer 2

你所能做的只是:hover CSS伪类

<aside>
  <header class="title">
    <h2>Title</h2>
  </header>

  <div class="content">
    Some information here
  </div> 
</aside> 

<强>样式：

div[class=content]{
   display:block;
}

header.title:hover + div.content{
   display:none;
}

Answer 3

我认为这就是你要找的东西，但你不能只用CSS做到这一点。

由于 user1167442 表示您不能仅使用CSS永久更改DOM元素。在这里你需要JQuery

 $("div.content").hide();
    $("header.title").click(function(){
        $("div.content").toggle();

    });

演示： http://jsfiddle.net/hsakapandit/HuuLD/

注意：不要忘记包含Jquery库文件