Hover
2.3.1
CSS3 驅動的懸停效果集合，可應用於連結、按鈕、徽標、SVG、特色圖像等。輕鬆應用到您自己的元素、修改或僅用於獲取靈感。可用於 CSS、Sass 和 LESS。
演示 |教學
npm install hover.css --savebower install hover --saveHover.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.csshover-min.css加入到您的網站檔案中，例如在名為css的目錄中<head>中引用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 效果的元素內。例如：
<a href="#" class="hvr-icon-forward">
Icon Forward
<i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>
在上面的程式碼中，我們給了一個連結元素一個hvr-icon-forward類，當連結懸停在上面時，它將使圖示向前移動。圖示本身被賦予一個hvr-icon類，讓 Hover.css 知道這是我們想要設定動畫的圖示。在這個範例中，我們的圖示來自 FontAwesome，我們已按照 FontAwesome 的說明將其載入到網頁的<head></head>中，如下所示：
< 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。）例如，您可以使用另一個圖示庫，或使用像這樣的影像：
<a href="#" class="hvr-icon-spin">
Icon Spin
<img src="myicon.svg" class="hvr-icon" />
</a>
在這裡，圖像將充當圖標，因為它應用了hvr-icon類，並且當滑鼠懸停在其上時，圖標將按照父元素上hvr-icon-spin類的定義旋轉。
圖示的位置完全由您控制。您可以將其放在文字之前，如下所示：
<a href="#" class="hvr-icon-spin">
<img src="myicon.svg" class="hvr-icon" />
Icon Spin
</a>
或使用自訂 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、動畫和優化。
