以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS clickCSS :click 模擬(純 CSS)

10/30 12' icon

Photo by http://net.tutsplus.com/
可選擇項次 可選擇項次 可選擇項次 可選擇項次 可選擇項次
先看效果

CSS2/3 新設了許多選取器(Selector),像是

等等等等等,族繁不及備載,有興趣的請參閱 W3School

獨缺 :click

上述的選取器,在應用上減少了過去必需寫一堆 Javascript 的麻煩,像是透過 :hover 可以簡單創造出下拉選單,而獨缺了一個詢問度相當高的 :click (:onclick)。:active 只有在按下的瞬間產生作用,一放開滑鼠按鍵就停止,比較接近 onmousedown,以下,透過 :active 和 :hover 的組合,模擬 :click 的效果,先看所需的 HTML 內容

可選擇項次 可選擇項次 可選擇項次 可選擇項次 可選擇項次
先看效果

想要設計的效果是:按"先看效果(.title)"後,"5個可選擇項次(span)"顯示出來,這裡,把負責被按下的文字,放在最下方,是有用意的,以下接著說明模擬方式

CSS

.container:active .selector {
	display:block;
	}
.title {
	width:6em;
	}
.selector {
	display:none;
	position:absolute;
	}
.selector:hover {
	display:block;
	}

.selector span {
	display:block;
	}

 

:active 設在最外層 .container 上,確保所有設計都在掌控中,所以,當按下"先看效果",事實上也觸發了 .container:active 動作,使原本 display:none 的 .selector 變成 display:block;

所以,按著左鍵不放時,.selector 會一直顯示,只不過一放開滑鼠,.selector 又消失,所以,為 .selector 加上 :hover,當按下左鍵,.selector 顯示了,不也正是在 :hover 狀態下?所以,利用 :.selector:hover 也把 display 屬性設為 block,

可選擇項次 可選擇項次 可選擇項次 可選擇項次 可選擇項次
先看效果

好了,原理有了,剩下細調,文字重疊怎麼辦?把 selector 的 padding-top 設大一點即可,這裡要用 padding-top 而非 margin-top,後者是把區塊實際動,而前者只是內容移動,區塊本身的範圍沒 變。

.container:active .selector {
	display:block;
	}
.title {
	width:6em;
	height:24px;
	}
.selector {
	display:none;
	position:absolute;
	padding-top:24px;
	}
.selector:hover {
	display:block;
	background-color:#DDD;
	}

.selector span {
	display:block;
	}

 

可選擇項次 可選擇項次 可選擇項次 可選擇項次 可選擇項次
先看效果

剩下,美化的動作,就交給你來處理啦!

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

卜維丰   2016/8/14 下午 09:00:00

子選項一個技巧,是上面留白,讓整個區塊壓在 click 物件之上,如此 hover 才能生效⋯⋯

Hank Tsai   2016/8/7 下午 03:31:00

您好

謝謝您分享這份我正好需要的編碼
但我在使用上一直碰到一些問題
目前感覺無法讓子選項的hove效果出現
只能隱藏起來
這讓我十分頭痛
自己剛開始自學有些特性可能不懂
還麻煩您教導我哪裡出了問題
網址是codepen的紀錄

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: