Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

08

之前有讀過一篇研究網頁互動的文章,大意是說

" 雖然與網頁互動的過程會花費讀者的時間,但它卻是吸引讀者很重要的一項因素 "

因此自己在設計部落格版面的時候,很喜歡加入一些互動的訊息 (大家有發現嗎??)

 

可別以為部落格架構都釘死了就不能有互動的功能,其實很多地方都可以悄悄地加入地

自己在設計CSS時,最常用到的屬性就是 hover 這功能,個人覺得非常好用且很容易上手

簡單來說,hover 是在控制當滑鼠移至某元件時,某元件該如何反應

以下整理出曾分享的痞客邦CSS中有用到 hover 屬性的地方

 

(1) hover + a 超連結應用

這是 hover 最常被使用的地方,當滑鼠移至超連結時,不論是文字變色、位移、換背景都是利用 hover 達到

以下CSS範例是滑鼠移至網誌標題時,網誌標題顏色變成桃紅色並且往右下位移

( CSS範例分享於 簡約相簿特殊版型 )

02

#banner h1 a:hover{

color: #fc3a63; /* 當滑鼠經過時,超連結文字顏色變成桃紅色 */

position: relative; /* 當滑鼠經過超連結時,超連結往右下位移1像素 */

top: 1px;

left: 1px;

}

 

(2) hover + background 背景變化 - 1

讓滑鼠所在的區域與其他區域有所區隔,可讓讀者容易找到滑鼠位置,以下範例用於文章背景

( CSS範例分享於 格子相片牆 )

03

標籤示意圖↓

05

.article-head{

background: #ccc;  /* 原本的背景顏色 */

}

.article:hover .article-head{

background: #aaa;  /* 當滑鼠經過時,背景顏色改變 */

}

/* 採用 .article:hover .article-head 而不是 .article-head:hover 的原因是希望滑鼠移至該文章任何區塊,背景都能有變化,若只定義在 .article-head:hover 的話,滑鼠移至文章標題那個灰色區塊背景才會變化,若移至圖片就不會變化 */

 

(3) hover + background 背景變化 - 2

除了背影顏色外,背景圖案也可以變化,以下範例是將連結文字前方加一個小圖,滑鼠經過時小圖會變換

( CSS範例分享於 簡約相簿特殊版型 )

10

.title h2{

background: url(灰色愛心的icon) top left no-repeat;  /* 滑鼠未移至文章時的icon */

padding-left: 14px;  /* 每篇文章標題前都有一個小圖,利用padding讓文字往後移,不要遮住圖 */

}

.article:hover .title h2{

background: url(紅色愛心的icon) top left no-repeat;  /* 滑鼠移至文章時的icon */

}

 

(4) hover + display 顯示 - 1

滑鼠移至某區塊時,出現原本沒有的文字或圖片提醒讀者,以下範例用於文章的繼續閱讀標籤 (more)

( CSS範例分享於 格子相片牆 )

 04

 .more a{  /* 因為繼續閱讀是個超連結,要用a來定義 */

display: none;  /* 平常設定不要顯示 */

}

.article:hover .more a{

display: block;  /* 當滑鼠移至該篇文章時,設定以block顯示,可設定超連結以一個區塊顯示 */

width: 150px;  /* 設定長與寬 */

height: 150px;

background: url(image url) center center no-repeat;  /* 設定背景 */

position: absolute;  /* 將繼續閱讀的位置放置於文章左上角,top=0, left=0 */

top: 0px;

left: 0px;

font-size: 0px;  /* 不要文字出現,因為設定背景來顯示 */

}

 

 

(5) hover +  display 顯示 - 2

下拉式選單也是利用hover效果做出來的喔! 以下語法只列出跟hover有關的,其他請參考分享的CSS語法

( CSS範例分享於 簡約相簿特殊版型 )

06

標籤示意圖↓

07

#links-row-2 .box-text{

display: none;  /* 平常設定不要顯示 */

}

#links-row-2 .box:hover .box-text{

display: block;  /* 當滑鼠移至該元件時,才會顯示 */

}

/* 要注意不可以寫成 #links-row-2 .box-title:hover .box-text ,CSS的寫法要考慮到層級問題,因為 box-text 是包含在 box 裡面(可看標籤示意圖),但不是包含在 box-title 裡面 */

 

(6) hover + positon - 1

讓圖片或是區塊移動,很容易吸引讀者的目光!

( CSS範例分享於 簡約相簿特殊版型 )

08

.article-content img:first-child{ /* 定義每篇文章的第一張圖 */

position: absolute;  /* 定義圖檔的位置在文章左上角 */

top: 0px;

left: 0px;

}

.article:hover .article-content img:first-child{

right: 0px;  /* 當滑鼠經過文章時,圖檔的位置變成在文章右上角 */

left: auto;

}

/* 當然也可以定義當滑鼠經過時,圖片位移幾個像素,例如 left: 50px; 就是往右位移50像素 */

 

(7) hover + positon - 2

不曉得各位部落格的格主會不會覺得板面太雜亂大多是因為側欄的關係

像我自己側欄元件能少放就少放,想讓版面乾淨一點,但有些部落格需要的元件較多無法刪減

這時候伸縮側欄就是一個很好用的設計,非常多人問過我這問題,趕快來寫個教學就不用一對一回答了!

( CSS範例分享於 拍立得圖文集 - 此範例僅使用伸縮側欄1#links-row-1 )

09

#links{

position: absolute;  /* 將整個側欄釘在網頁右上角 */

top: 0px;

right: -250px;  /* 調整一下數值讓側欄露一小角在網頁上,若改成left: -250px;側欄會釘在網頁左上角 */

-webkit-transition: right 0.5s ease-out;  /* 以下四行語法會產生側欄位移動畫的效果,非必要 */

-moz-transition: right 0.5s ease-out;  /* 會有四行是因為不同瀏覽器的語法不同 */

-o-transition: right 0.5s ease-out;

transition: right 0.5s ease-out;

}

#links:hover{

right: 0px;  /* 當滑鼠經過側欄那一小角時,將整個側欄顯示出來 */

}

body{

overflow-x: hidden;  /* 若是將側欄釘在網頁右方,會出現水平方向的捲軸,用此語法消除捲軸 */

}

/* 是不是非常簡單!!! 另外側欄有分側欄1(#links-row-1)與側欄2(#links-row-2),若只想將其中一個側欄變成伸縮側欄,將以上語法的 #links 改成 #links-row-1 或 #links-row-2 就可以了。另外要讓讀者注意到這邊有選單的話,建議在側欄多出的那一小角設一個背景圖上面有提示文字。 */

 

 

* Murmur

看完教學是不是覺得 hover 簡單又實用呢!

其實 hover 還可以與其他屬性搭配,效果也很不賴,但太多了無法一一整理

先整理目前我有分享過的語法,其他的就等下次再說囉 :P

快來幫你的部落格加點動態效果吧!

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

文章標籤
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(44) 人氣()


留言列表 (44)

發表留言
  • 仔仔
  • 這教學好實用( *´◒`*)
    我在修改css的時候也經常會用到hover
    幫忙推個:>
  • 謝謝你的稱讚,好開心喔 (*˘︶˘*)
    你設計和分享的版面也都很讚耶 :D

    Dribs & Drabs 於 2013/12/08 19:27 回覆

  • ZeRo 紫燄
  • 推一下, 還沒有時間看, 不過也讚一下哦^_^""
  • 哈,謝謝你喔 :D

    Dribs & Drabs 於 2013/12/08 20:54 回覆

  • Sunry
  • 好棒! 寫的很詳細呢!!!!
    要趁有時間時來研究看看 嘻嘻
    謝謝你!!!
  • 其實我很早前就想要寫了,只是沒什麼動力,哈
    謝謝你的稱讚 (*˘︶˘*)

    Dribs & Drabs 於 2013/12/08 21:54 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 您好
  • 您好~這篇文章實在太棒了!!
    小弟我有個問題想要請教,就是關於最後第7的用法,如果已經成功之後,
    要如何在露出的一小角加上文字或者圖片?
    謝謝您撥冗回答,感激不盡!
  • 在link加上background屬性
    像文章中的範例背景須放在左上角且不重複,例如下
    background: url(img.bmp) top left no-repeat;
    加文字的話可能就沒辦法了,除非把文字做成圖片
    謝謝你的讚美 >////<

    Dribs & Drabs 於 2014/02/06 19:12 回覆

  • 悄悄話
  • 台熊
  • 謝謝分享,超實用的啦~~~
  • 謝謝你的讚美 :D

    Dribs & Drabs 於 2014/03/16 21:26 回覆

  • jasmine980
  • 謝謝分享,超實用的啦~~
  • 不客氣 :D

    Dribs & Drabs 於 2014/05/22 09:55 回覆

  • 悄悄話
  • 悄悄話
  • boyofsky
  • 太感謝您了!!
    後來有重新找書來看 發現自己的觀念都有問題
    要學習新的語言還是要有參考書啊
    感謝您的回應喔 :)
  • 不客氣 :D

    Dribs & Drabs 於 2014/09/09 22:38 回覆

  • kuumaze
  • 好棒,一些在網頁上的語法問題都在這理解決了^^
  • 不客氣 :)

    Dribs & Drabs 於 2014/10/01 21:49 回覆

  • 小池野夏
  • 謝謝你的教學
    我找了好久的說

    真的很感謝大大您。
  • 不客氣 :)

    Dribs & Drabs 於 2015/03/08 20:45 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 黑木 桜子★
  • 請問大大能左右各一個浮動側欄嗎
  • 可以喔,痞客共有兩個側欄,分別是 #links-row-1 跟 #links-row-2

    Dribs & Drabs 於 2015/11/28 20:59 回覆

  • CHI
  • Wei你好,我想請教你
    我有兩張圖片疊在一起
    有沒有辦法當游標移到上面那張圖時
    讓下面的圖片改變呢?
    http://whale.mine.csie.ncu.edu.tw/p2015/testmask.html
    就是想像部落格可以設"繼續閱讀"那樣
    可是自己做的網頁沒有more可以設定><
    麻煩你指點一下 謝謝!!
  • 不知道你的影像是怎麼疊的,簡單舉個例子給你參考
    < div id="outer" >
    < img id="img_1" src="..." >
    < img id="img_2" src="..." >
    < /div >
    CSS可寫成#outer:hover img_2{動作}
    因為兩張影像疊在一起,觸碰到img_1等於觸碰到outer,所以只要定義當outer被碰到時,img_2該如何反應就可以了
    如果是自己設計的網頁就更簡單,可以再加一個img,未觸碰outer時設定不顯示(display:none),觸碰outer時再顯示繼續閱讀的字就可以了 (display:block)

    Dribs & Drabs 於 2016/03/27 21:37 回覆

  • 廁所的花子君阿野
  • 請問....
    我想放在右邊
    可是無效
    但是放左邊卻可以
    我直接複製貼上
    可是她就是沒辦法
    想請教大大
  • 你說的是哪一個語法啊? 還有甚麼左邊右邊?

    Dribs & Drabs 於 2016/07/26 13:03 回覆

  • 廁所的花子君阿野
  • 是忘記說了
    是伸縮側欄
    不好意思
  • 看到錯誤畫面比較知道你要表達的是甚麼,也比較好偵錯

    Dribs & Drabs 於 2016/07/26 22:16 回覆

  • 廁所的花子君阿野
  • 就是
    想把伸縮放右邊
    可是用了你的方法
    她沒有效
    可是如果把數直改成左邊的話就可以伸縮了
  • 因為不清楚你是怎麼改的,我需要錯誤的畫面或語法才能偵錯喔!!

    Dribs & Drabs 於 2016/07/27 10:09 回覆

  • 悄悄話
  • Hsin
  • 你好 我插入了繼續閱讀但還是沒有顯示耶....
    可以再麻煩你幫我看看嗎 謝謝!!!
  • OK

    Dribs & Drabs 於 2017/03/06 10:22 回覆

  • Hsin
  • 你好!後來換了一張有顏色的圖就可以了!!謝謝!!
  • OK

    Dribs & Drabs 於 2017/03/06 10:22 回覆

  • Tiana
  • 你好,還有個問題想請教,有辦法用CSS把 目前分類:XX(1) 這個設定成只保留XX嗎? 謝謝!
  • 這個問題要寫JS才能解決,CSS不行

    Dribs & Drabs 於 2017/03/10 09:00 回覆

  • 悄悄話
  • HoneyAlice
  • 您好,我想請問一下隱藏側欄那個教學,如果側欄要跟著滑鼠往下滑的話要怎麼設定?
  • position: absolute; 改成 position: fixed; 可以固定在網頁上某個位置

    Dribs & Drabs 於 2017/03/18 22:28 回覆

  • Alice Tan
  • 好仔細的教學,收穫很多。
    喜歡看你寫的東西、照片和你的部落格風格,有種平靜舒適感,謝謝!
  • 謝謝你喜歡和溫馨的留言 :D

    Dribs & Drabs 於 2017/05/17 17:16 回覆

  • 悄悄話
  • JuoJou
  • 超級感謝你不藏私的分享教學 <3 <3
  • 不客氣 :D

    Dribs & Drabs 於 2017/08/13 11:21 回覆

找更多相關文章與討論
【 X 關閉 】

【痞客邦】大學生網路社群使用習慣調查

親愛的讀者,痞客邦希望能了解大學生的網路社群使用習慣,
填問卷即可抽獨家好禮喔!
(注意:關閉此視窗將不再出現)