以下為本站文章分類清單

  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;
	}

 

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

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

以下為文章回應區

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

   2017/5/9 下午 07:14:00

<?php

manicure   2017/5/4 上午 04:14:00

I was suggested this blog by my cousin. I'm not sure whether this post is written by him as
nobody else know such detailed about my trouble. You're incredible!
Thanks!

manicure   2017/4/11 下午 06:48:00

What a stuff of un-ambiguity and preserveness of precious know-how
regarding unexpected emotions.

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

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

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

您好

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

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