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的目录中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、动画和优化。
