Hover是一组CSS3实现的链接、按钮等悬停效果
Hover.css
一组 CSS3 支持的悬停效果，可应用于链接、按钮、徽标、SVG、精选图片等。您可以轻松应用于您自己的元素、进行修改或仅用于激发灵感。支持 CSS、Sass 和 LESS。
下载/安装
- NPM:
npm install hover.css --save - Bower:
bower install hover --save - Download Zip
使用方法
Hover.css 有多种使用方式；您可以复制并粘贴您想要使用的效果到您自己的样式表中，也可以引用样式表。然后，只需将效果的类名添加到您想要应用它的元素即可。
A. 复制并粘贴效果
如果您只打算使用一个或多个效果，最好将效果复制并粘贴到您自己的样式表中，这样用户就无需完整下载 css/hover.css。
假设您想使用“增大”效果：
-
下载 Hover.css
-
在
css/hover.css中找到“增大”CSS（每个效果都使用其上方的注释命名）：css/* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition-duration: 0.3s; 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 变量轻松更改。
B. 引用 Hover.css
如果您计划使用多种 Hover.css 效果，建议您引用整个 Hover.css 样式表。
- 下载
hover-min.css - 将
hover-min.css添加到您的网站文件中，例如，将其添加到名为css的目录中。 - 在您想要添加 Hover.css 效果的 HTML 页面的
<head>中引用hover-min.css：
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>或者，您也可以像这样将引用添加到现有样式表中（这对于无法编辑 HTML 的 WordPress 用户可能很有用）：
@import url("hover-min.css");- 假设您想要使用“增大”效果，请在您想要使用此效果的 HTML 文件中，将
.hvr-grow类添加到您选择的元素。
应用 Hover.css 效果前的示例元素：
<a href="#" class="button">添加到购物篮</a>应用 Hover.css 效果后的示例元素：
<a href="#" class="button hvr-grow">添加到购物篮</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() 混合宏。
有关可变形元素的更多信息，请参阅 CSS Transforms 模块。
使用图标效果
要添加 Hover.css 图标，请将图标 HTML 代码放置在应用 Hover.css 效果的元素内部。例如：
<a href="#" class="hvr-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">
图标旋转
<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" />
图标旋转
</a>
或者使用自定义 CSS 来调整图标的位置。
包含哪些内容？
该项目包含以下文件夹和文件：
css
- demo-page.css - 包含用于演示悬停效果的样式。您的项目不需要此文件
- hover-min.css - Hover.css 的精简/生产版本
- hover.css - Hover.css 的开发版本
scss/less
- effects - 包含各个效果，并按类别存放于文件夹中
- _hacks.scss/_hacks.less、_mixins.scss/_mixins.less、_options.scss/_options.less - Sass/LESS 实用程序
- hover.scss/hover.less - Hover.css 的开发版本（支持 Sass 和 LESS 风格）
其他
其他值得注意的文件包括：
- index.html - 演示所有 Hover.css 效果
- Gruntfile.js - 用于通过 Grunt 开发 Hover.css。
浏览器支持
许多 Hover.css 效果依赖于 CSS3 功能，例如过渡、动画、变换和伪元素，因此，这些效果可能无法在旧版浏览器中完全正常工作。
- 过渡 和 动画 - Internet Explorer 10 以下浏览器不支持
- 变换 - Internet Explorer 9 以下浏览器不支持
- 生成内容（伪元素） - Internet Explorer 8 以下浏览器不支持
除上述浏览器外，所有主流浏览器均支持 Hover.css。请访问 caniuse.com 了解对多种 Web 技术的全面支持，并相应地测试您的网页。建议针对旧版浏览器应用回退效果，使用这些浏览器支持的 CSS 或功能测试库，例如 Modernizr。
使用 Grunt 进行开发
Grunt 并非必需，但可以加快开发速度。安装 Grunt 后，从命令行运行 grunt 来设置一个开发服务器，该服务器可通过 http://127.0.0.1:8000/ 或您的本地 IP 进行网络测试。运行 Grunt 后，Sass 或 LESS 将被预处理（取决于您是在 scss 还是 less 文件夹中工作），并且 CSS 文件将被压缩。
注意： Grunt 最初设置为自动为 CSS 属性添加前缀，但为了使项目尽可能易于访问，现在不再如此。应该使用 prefixed(property, value) Sass/LESS 混合宏来为浏览器添加前缀。请参阅使用 Sass/LESS 进行开发 和 [使用 LESS 进行开发]。
使用 Sass/LESS 进行开发
Sass/LESS 并非必需，但可以加快开发速度。请使用您喜欢的软件或 Grunt 提供的环境预处理 Sass/LESS。
Hover.css 项目中使用 Sass/LESS 将各种 CSS 分离到特定的文件中。每个效果都位于 effects 目录中的单独文件中。Hover.css 还使用以下 .scss 和 .less 文件：
_hacks
包含应用于特定效果的 hack（一些不受欢迎但通常必要的代码行）。此处解释 hack。
_mixins
包含 prefixed 和 keyframes 混合宏，用于将您在 _options.scss / _options.less 中指定的必要前缀应用于属性和关键帧。
属性可以像这样添加前缀：
- Sass:
@include prefixed(transition-duration, .3s);- LESS:
.prefixed(transition-duration, .3s);prefixed 混合宏会传递您想要添加前缀的属性，后跟其值。
关键帧可以像这样添加前缀：
- Sass:
@include keyframes(my-animation) {
to {
color: red;
}
}keyframes 混合宏会使用 @content 指令传递关键帧名称和内容。
- LESS:
.keyframes(my-animation, {
to {
color: red;
}
});keyframes 混合宏会传递关键帧名称和内容，两者均作为参数。
_options
包含默认选项、各种效果选项以及您希望与“prefixed”混合宏一起使用的浏览器前缀。默认情况下，只有“-webkit-”前缀设置为“true”（因为现在大多数浏览器不再要求使用前缀）。
从“2.0.0”开始，“_options”还包含“$nameSpace”/“@nameSpace”选项，允许您更改所有类的前缀名称。默认命名空间为“hvr”。
“$includeClasses”/“@includeClasses”选项默认设置为“true”，并将所有 Hover.css 效果生成到它们各自的类名下，例如“hvr-grow”。如果您希望将构成 Hover.css 效果的属性添加到您自己的类名中，请将此选项设置为“false”。
为 Hover.css 贡献代码
如果您想贡献自己的效果，请参阅贡献指南。
许可证
Hover.css 提供免费的个人/开源许可证或付费的商业许可证，具体取决于您的需求。要比较不同的许可证，请访问 Ian Lunn Design Limited 商店 并在此处购买商业许可证。
个人/开源
对于个人/开源用途，Hover.css 采用 MIT 许可证 提供。
- 可在无限数量的个人应用程序中使用
- 您的应用程序不得出售
- 您的修改将保持开源
- 免费更新
商业
对于商业用途，Hover.css 采用商业许可证、扩展商业许可证和 OEM 商业许可证提供。
商业许可证
- 仅限 1 个应用程序使用
- 您的应用程序仅限出售一次（例如，将网站出售给客户）
- 您的代码将保持专有，仅供您自己使用
- 免费更新到主要版本
扩展商业许可证
- 可在无限数量的应用程序中使用
- 无限次销售您的应用程序（例如，在主题商店出售的网站模板）*
- 您的代码将保留所有权，仅供您自己使用
- 免费更新到主要版本
*允许最终用户创建独立应用程序的应用程序除外。请参阅 OEM 商业许可证。
OEM 商业许可证
如果您的应用程序允许最终用户创建包含 Ian Lunn Design Limited 软件（例如开发工具包、库或应用程序构建器）的独立应用程序，则您必须获得 OEM 商业许可证。如需了解更多关于 OEM 商业许可证的信息，请联系我们。
MIT 许可证（v2.2.0 之前 / 2017 年 3 月 24 日）
Hover.css 之前根据 MIT 许可证提供，可用于商业和非商业用途。任何在 v2.2.0（2017 年 3 月 24 日）之前获得 MIT 商业许可证的用户，均可继续使用 v2.2.0 之前的 Hover.css 版本。
如果您想升级到 v2.2.0 或更高版本，或者只是想表达您对 Hover.css 的支持（我们将不胜感激！），请购买最新的商业许可证。购买商业许可证。
聘请 Ian Lunn
Ian Lunn 是一位自由职业前端开发者，也是《CSS3 Foundations》一书的作者。
聘请 Ian 负责响应式网站、WordPress 网站、JavaScript、动画和优化。