顯示隱藏與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做。

As user1167442表示您不能僅使用CSS永久性更改DOM元素。在這裏，你需要的JQuery

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

    }); 

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

注：不要忘了包括jQuery庫文件