CSS實現控制元素的顯示和隱藏

1 使用label + input實現元素的隱藏和顯示

以下**點選『選單』可以實現li列表的顯示和隱藏：

<

style 
type
="text/css"
>
*input, ul
input:checked ~ ul 
style
>
<
body
>
<
label 
for="menu"
>選單
label
>
<
div>
<
input 
id="menu"
type
="checkbox"
/>
<
ul>
<
li>1
li>
<
li>1
li>
<
li>1
li>
ul>
div>
body
>

~選擇器：

element1~element2 選擇器 element1 之後出現的所有 element2。兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1。

2 hover實現滑鼠懸浮時顯示其他元素，離開時隱藏這個元素

以下**實現滑鼠放到『選單』時顯示li列表，離開時隱藏li列表：

<

style 
type
="text/css"
>
*input, ul
#btn:hover ~ ul 
style
>
<
body
>
id="btn"
>選單
>
<
ul>
<
li>1
li>
<
li>1
li>
<
li>1
li>
ul>
body
>

3 button + focus點選指定按鈕時顯示，點選其他地方時隱藏

以下**實現點選『選單』時顯示li列表，點選除『選單』以外的地方隱藏li列表：

<

style 
type
="text/css"
>
*input, ul
#btn:focus ~ ul 
style
>
<
body
>
<
button 
id="btn"
>選單
button
>
<
ul>
<
li>1
li>
<
li>1
li>
<
li>1
li>
ul>
body
>

jQuery控制元素隱藏和顯示

1 jquery隱藏和顯示效果 通過 jquery，您可以使用 hide 和 show 方法來隱藏和顯示 html 元素 hide click function 點選id hide 元素時，隱藏所有標籤內容 show click function 點選id show 元素時，顯示所有標籤內容 2 j...

CSS筆記 元素的顯示和隱藏

display none 不佔位常用 visibility visible hidden 佔位overflow visible hidden scroll auto display none display隱藏元素後，不再占有原來的位置。visible 預設值。元素是可見的。hidden 元素是不可...

CSS控制DIV層顯示和隱藏的實現方法

css中的display和visibility屬性 css中display和visibility可以隱藏和顯示html元素包括div層。看起來兩者非常類似，很多人會搞混。下面分別介紹兩者的屬性 display none block display none 隱藏該html元素，確切的說，是在瀏覽器中...