以下為本站文章分類清單

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

 

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

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

以下為文章回應區

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

make certain asbestos   2017/11/21 上午 04:12:00

I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do
it for you? Plz answer back as I'm looking to create my own blog and would like to
find out where u got this from. kudos

Nolan   2017/11/20 下午 06:21:00

Way cool! Some extremely valid points! I
appreciate you penning this write-up plus the rest of the site is very good.

nhan.edu.vn   2017/11/18 下午 02:19:00

Hi! Do you know if they make any plugins to protect against hackers?
I'm kinda paranoid about losing everything I've worked hard on.
Any recommendations?

José Wilame Araújo Rodrigues   2017/11/12 下午 04:58:00

If you desire to take a great deal from this article then you have to apply such techniques to your won webpage.

Lelio Vieira Carneiro Junior   2017/11/10 上午 07:56:00

Just desire to say your article is as amazing.
The clearness in your submit is simply spectacular and i
can assume you're knowledgeable on this subject.
Well together with your permission allow me to seize
your feed to keep updated with forthcoming post.
Thank you a million and please keep up the gratifying work.

ordinarysociali38.jimdo.com   2017/8/12 上午 09:45:00

I must thank you for the efforts you have put in writing this website.
I really hope to check out the same high-grade content from you in the future as well.
In fact, your creative writing abilities has encouraged me to get my own, personal site now ;)

How can we increase our height?   2017/8/4 上午 09:41:00

We're a group of volunteers and starting a new scheme in our community.
Your website offered us with valuable info to work on. You have done
a formidable job and our entire community will be
thankful to you.

How you can increase your height?   2017/7/31 上午 11:39:00

Everything is very open with a clear description of the issues.

It was definitely informative. Your site is very helpful.
Many thanks for sharing!

claytontlbpunubzu.jimdo.com   2017/7/31 上午 02:21:00

Very nice post. I just stumbled upon your weblog and wanted to
say that I've truly enjoyed surfing around your blog posts.
After all I'll be subscribing to your feed and I hope you write
again very soon!

Can better posture make you taller?   2017/7/28 上午 11:45:00

This excellent website really has all the information I
wanted concerning this subject and didn't know who to ask.

What is distraction osteogenesis?   2017/7/22 上午 03:51:00

Very good post! We are linking to this great article on our site.
Keep up the great writing.

foot pain relief   2017/7/3 下午 09:05:00

As the admin of this site is working, no question very rapidly it will be famous, due to its quality contents.

   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的紀錄

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