image

（一張毫無關聯的孔雀魚）

今天來給各位介紹css中一個非常好用的語法－－ｈｏｖｅｒ

先來看看ｈｏｖｅｒ的範例吧～

#banner h1 a:hover{
color: #fc3a63;/*當滑鼠經過這個區塊時，文字顏色改變成設定的顏色*/
}

範例的效果:

020.gif

從圖中可以看出來，ｈｏｖｅｒ這個語法的主要效果就是當滑鼠移到設定了ｈｏｖｅｒ的區塊的時候，將區塊原本的ｃｓｓ設定改成加了:hover中的設定

在加了:hover語法的區塊裡所寫的任何ｃｓｓ設定，都會在滑鼠移動到該區塊的時候將ｃｓｓ改變成:hover部分的設定

語法裡面#banner h1 a:hover中的＂ａ＂代表了超連結的文字，如果要改變的文字是超連結的話一定要加上＂ａ＂才會有作用，而一般沒有超連結的文字可以直接改變，不用再加上＂ａ＂

 

結論～

當你想要滑鼠移動到網頁的某個區塊的時候，改變那個區塊的ｃｓｓ，可以嘗試著使用ｈｏｖｅｒ語法

 

～～～沒出場的分割線醬 (´∩ω∩｀) ～～～

 

arrow
arrow
    文章標籤
    css教學 滑鼠移動改變網頁 hover語法 css基礎教學 css選單 初學css 網頁設計免費教學
    全站熱搜

    星夢月影 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄