出現，並通過點擊它消失的div效果

-2

我不明白如何在這個網站做類似：__smashingmagazine.com出現，並通過點擊它消失的div效果

如果妳調整窗口的大小，搜索將是一個按鈕。所以...嘗試點擊這個搜索圖標...新的div將顯示搜索輸入。並注意它的行爲：不管你接下來要做什麼，這個div不會隱藏它自己，但只有當你點擊出現而不是搜索圖標的'x'時...這是純粹的CSS，正確的？！這怎麼可能...... 我發現這篇文章： Click here

但行爲是非常，非常不同......，我不喜歡它。

任何想法如何使它像上面的網站一樣工作？任何事情可能會有幫助

謝謝！

來源

2015-06-04 densssky

沒有JS，夥計...純粹的css – densssky

http://jsfiddle.net/we76L66h/它使用這種方法，但有2個按鈕重疊在彼此的頂部。一個將目標設置爲'＃ms'，另一個將其重置爲'＃top'。這個例子應該讓你在正確的道路上。 - 這個例子只會改變一次，但你可以通過一點努力重疊2個按鈕。這將實現與你想要的例子相同的事情。 – naththedeveloper

N A T H！你是那個男人，兄弟！做一些簡短的回答，所以我會接受它，如果你喜歡。 – densssky

Smashing Magazine的示例使用:target psuedo類在單擊錨點時更改元素的CSS。以下簡要介紹了他們如何實現該行爲。

錨點被配置爲在URL中設置一個片段標識符，如果是Smashing Magazine，則這是#ms。該有這樣一個錨：

<a href="#ms">Search</a>

當點擊片段標識符爲#ms，然後他們用它來使搜索出現使用:target僞類。

#ms { 
    display: none; 
} 
#ms:target { 
    display: block; 
}

當片段標識符被設定爲#ms中，：目標樣式被激活時，顯示所述搜索。

這裏有一個簡單的例子：http://jsfiddle.net/we76L66h/

與兒童（#ms:target + div.example）他們利用:target也改變目標元素中的孩子們的造型。當設置了#ms片段標識符時，這是他們如何將按鈕更改爲「關閉」按鈕。

來源

2015-06-04 14:39:21 naththedeveloper

出現，並通過點擊它消失的div效果

回答

相關問題