CSS3 驅動的懸停效果集合,可應用於連結、按鈕、徽標、SVG、特色圖像等。輕鬆應用到您自己的元素、修改或僅用於獲取靈感。可用於 CSS、Sass 和 LESS。
演示 |教學
npm install hover.css --save
bower install hover --save
Hover.css 可以透過多種方式使用;複製並貼上您想要在自己的樣式表中使用的效果或引用樣式表。然後只需將效果的類別名稱新增至您想要套用它的元素即可。
如果您打算只使用一種或多種效果,最好將效果複製並貼上到您自己的樣式表中,這樣使用者就不必下載整個css/hover.css
。
假設您想使用成長效果:
下載懸停.css
在css/hover.css
中,找到 Grow CSS(每個效果都使用其上方的註解命名):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}
複製此效果,然後將其貼到您自己的樣式表中。
在您希望顯示效果的 HTML 檔案中,將.hvr-grow
類別新增到您選擇的元素中。
應用 Hover.css 效果之前的範例元素:
< a href =" # " > Add to Basket a >
應用 Hover.css 效果後的範例元素:
< a href =" # " class =" hvr-grow " > Add to Basket a >
注意:從2.0.0
開始,所有 Hover.css 類別名稱都以hvr-
為前綴,以防止與其他函式庫/樣式表發生衝突。如果使用 Sass/LESS,可以使用scss/_options.scss
或less/_options.less
中的$nameSpace
/ @nameSpace
變數輕鬆變更。
如果您打算使用許多 Hover.css 效果,您可能需要引用整個 Hover.css 樣式表。
hover-min.css
hover-min.css
加入到您的網站檔案中,例如在名為css
的目錄中
中引用hover-min.css
: < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >
或者,您可以將引用新增至現有樣式表中,如下所示(這對於無法編輯 HTML 的 WordPress 使用者可能有用):
@import url ( "hover-min.css" );
.hvr-grow
類別新增至您選擇的元素中。應用 Hover.css 效果之前的範例元素:
< a href =" # " class =" button " > Add to Basket a >
應用 Hover.css 效果後的範例元素:
< a href =" # " class =" button hvr-grow " > Add to Basket a >
display
屬性的注意事項為了使元素“可變形”,Hover.css 為其應用的所有元素提供以下內容:
display : inline-block;
vertical-align : middle;
如果您希望覆寫此行為,請從 Hover.css 中刪除上述 CSS 或更改元素的display
屬性。請務必在 Hover.css 聲明之後聲明覆蓋,以便 CSS 級聯生效。或者,如果您使用的是 Sass/LESS 版本的 Hover.css,則可以刪除/註解掉scss/_hacks.scss
或less/_hacks.less
中找到的forceBlockLevel()
mixin。
有關可變形元素的更多信息,請參閱 CSS 變形模組。
若要新增 Hover.css 圖標,請將圖標 HTML 放置在套用 Hover.css 效果的元素內。例如:
在上面的程式碼中,我們給了一個連結元素一個hvr-icon-forward
類,當連結懸停在上面時,它將使圖示向前移動。圖示本身被賦予一個hvr-icon
類,讓 Hover.css 知道這是我們想要設定動畫的圖示。在這個範例中,我們的圖示來自 FontAwesome,我們已按照 FontAwesome 的說明將其載入到網頁的中,如下所示:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >
注意:從 Hover.css v2.3.0 開始,您可以使用任何您喜歡的方法來新增圖示(以前,僅支援開箱即用的 FontAwesome。)例如,您可以使用另一個圖示庫,或使用像這樣的影像:
在這裡,圖像將充當圖標,因為它應用了hvr-icon
類,並且當滑鼠懸停在其上時,圖標將按照父元素上hvr-icon-spin
類的定義旋轉。
圖示的位置完全由您控制。您可以將其放在文字之前,如下所示:
或使用自訂 CSS 將圖示放置在您認為合適的位置。
此項目由以下資料夾和文件組成:
其他值得注意的文件包括:
許多 Hover.css 效果依賴 CSS3 功能,例如過渡、動畫、變換和偽元素,因此,效果可能無法在舊版瀏覽器中完全運作。
除了上述瀏覽器之外,所有主要瀏覽器都支援 Hover.css。請造訪 caniuse.com 以獲取對許多網路技術的全面支援並相應地測試您的網頁。建議使用舊版瀏覽器支援的 CSS 或功能測試庫(例如 Modernizr)對舊版瀏覽器套用後備效果。
Grunt不是必要的,但可以加快開發速度。安裝 Grunt 後,從命令列執行grunt
以設定透過 http://127.0.0.1:8000/ 或本機 IP 存取的開發伺服器以進行網路測試。當 Grunt 運行時,Sass 或 LESS 將被預處理(取決於您是在scss
還是less
資料夾中工作)並且 CSS 檔案將被縮小。
注意:最初 Grunt 設定為自動前綴 CSS 屬性,但為了使專案盡可能易於訪問,情況已不再如此。應該使用prefixed(property, value)
Sass/LESS mixin 作為瀏覽器前綴。請參閱使用 Sass/LESS 進行開發和[使用 LESS 進行開發]。
Sass/LESS不是必要的,但可以加快開發速度。使用您最喜歡的軟體或透過 Grunt 提供的環境來預處理 Sass/LESS。
Hover.css專案中使用Sass/LESS將各種CSS分離到特定的檔案中。每個效果都位於effects
目錄中自己的檔案中。 Hover.css 也使用以下.scss
和.less
檔:
包含應用於某些效果的 hack(不需要但通常是必要的程式碼行)。黑客在這裡解釋。
包含prefixed
和keyframes
混合,將您在_options.scss
/ _options.less
中指定的必要前綴套用至屬性和關鍵影格。
屬性可以像這樣加上前綴:
@include prefixed(transition-duration , .3s);
. prefixed ( transition-duration , .3 s );
prefixed
mixin 會傳遞您想要添加前綴的屬性,後面接著其值。
關鍵影格可以像這樣加上前綴:
@include keyframes(my-animation) {
to {
color : red;
}
}
keyframes
混合透過關鍵影格名稱傳遞,接著是使用 @content 指令的內容。
. keyframes ( my-animation , {
to {
color : red;
}
});
keyframes
混合傳遞關鍵幀名稱,後跟內容,兩者都作為參數。
包含預設選項、各種效果選項以及您想要與prefixed
mixin 一起使用的瀏覽器前綴。預設情況下,只有-webkit-
前綴設定為true
(因為現在大多數瀏覽器不需要前綴)。
從2.0.0
開始, _options
還包含$nameSpace
/ @nameSpace
選項,它允許您變更所有類別的前綴名稱。預設命名空間是hvr
。
$includeClasses
/ @includeClasses
選項預設為true
,並將在自己的類別名稱下產生所有 Hover.css 效果,例如hvr-grow
。如果您希望將構成 Hover.css 效果的屬性新增至您自己的類別名稱中,請將此選項設為false
。
如果您想貢獻自己的效果,請參閱貢獻指南。
Hover.css 根據您的要求在免費的個人/開源或付費商業許可證下提供。要比較許可證,請訪問 Ian Lunn Design Limited Store 並在此處購買商業許可證。
對於個人/開源用途,Hover.css 根據 MIT 許可證提供
閱讀完整許可證
對於商業用途,Hover.css 可根據商業、擴展商業和 OEM 商業許可使用。
購買|閱讀完整許可證
*允許最終用戶產生單獨應用程式的應用程式除外。請參閱 OEM 商業許可證。
購買|閱讀完整許可證
如果您的應用程式使最終用戶能夠產生包含 Ian Lunn Design Limited 軟體的單獨應用程式(例如開發工具包、庫或應用程式建構器),則您必須獲得 OEM 商業許可證。請聯絡我們以了解有關 OEM 商業許可證的更多資訊。
Hover.css 之前是根據 MIT 許可證提供的,可用於商業和非商業用途。在 v2.2.0(2017 年 3 月 24 日)之前獲得 MIT 商業用途許可證的任何人都可以在同一許可證下繼續使用 v2.2.0 之前的 Hover.css 版本。
如果您想升級到 v2.2.0 或更高版本,或者只是想表達您對 Hover.css 的支持(我們將不勝感激!),請購買最新的商業許可證。購買商業許可證。
Ian Lunn 是一名自由前端開發人員,也是 CSS3 Foundations 的作者。
僱用 Ian 負責響應式網站、WordPress 網站、JavaScript、動畫和優化。