Hover - 应用于链接、按钮、徽标、SVG、特色图像等的 CSS3 悬停效果集合。轻松应用于您自己的元素、修改或仅用于灵感。在 CSS、Sass 和 LESS 中可用
悬停.css
CSS3 驱动的悬停效果的集合，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用于你自己的元素，修改或只是用于灵感。在CSS，Sass和LESS中可用。
内容
下载/安装
- 国家防范机制：
npm install hover.css --save
- 凉亭：
bower install hover --save
- 下载压缩
如何使用
悬停.css可以以多种方式使用;在你自己的样式表中复制并粘贴要使用的效果，或引用样式表。然后，只需将效果的类名添加到要应用它的元素中即可。
A. 复制和粘贴效果
如果你计划只使用一种或多种效果，最好将效果复制并粘贴到你自己的样式表中，这样用户就不必完整下载。
css/hover.css
假设你要使用“增长”效果：
-
下载悬停.css
-
在 中，找到 Grow CSS（每个效果都使用其上方的注释命名）：
css/hover.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
应用悬停.css效果之前的示例元素：
<a href="#">Add to Basket</a>应用悬停.css效果后的示例元素：
<a href="#" class="hvr-grow">Add to Basket</a>注意：从所有悬停开始.css类名都带有前缀，以防止与其他库/样式表发生冲突。如果使用 Sass/LESS，则可以使用 or 中的 / 变量轻松更改。
2.0.0
hvr-
$nameSpace
@nameSpace
scss/_options.scss
less/_options.less
B. 参考悬停.css
如果你计划使用许多 Hover.css 效果，你可能希望引用整个 Hover.css 样式表。
- 下载
hover-min.css
- 将文件添加到你的网站，例如在名为
hover-min.css
css
- 要添加悬停.css效果的 HTML 页面的引用：
hover-min.css
<head>
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>或者，你可以像这样将引用添加到现有样式表中（这对于无法编辑HTML的WordPress用户可能很有用）：
@import url("hover-min.css");- 假设你要使用“增长”效果，则在要使用此效果的 HTML 文件中，将 的类添加到所选元素。
.hvr-grow
应用悬停.css效果之前的示例元素：
<a href="#" class="button">Add to Basket</a>应用悬停.css效果后的示例元素：
<a href="#" class="button hvr-grow">Add to Basket</a>关于房产的说明display
为了使元素“可转换”，Hover.css 为应用它的所有元素提供以下内容：
display: inline-block;
vertical-align: middle;如果要覆盖此行为，请从悬停中删除上述 CSS.css或更改元素的属性。请务必在 Hover.css 声明之后声明覆盖，以便 CSS 级联生效。或者，如果你使用的是 Hover.css 的 Sass/LESS 版本，则可以删除/注释掉在 或 中找到的 mixin。
display
forceBlockLevel()
scss/_hacks.scss
less/_hacks.less
有关可转换元素的详细信息，请参阅 CSS 转换模块。
使用图标效果
若要添加.css悬停“图标，请将图标 HTML 放在应用悬停.css效果的元素内。例如：
<a href="#" class="hvr-icon-forward"> Icon Forward <i class="fa fa-chevron-circle-right hvr-icon"></i> </a>
在上面的代码中，我们给了一个链接元素，当链接悬停在上面时，该元素的类将使图标向前移动。图标本身被赋予一个类，让悬停.css知道这是我们想要动画的图标。在这个例子中，我们的图标来自FontAwesome，我们已经按照FontAwesome的说明将其加载到我们的网页中，如下所示：
hvr-icon-forward
hvr-icon
<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="https://raw.githubusercontent.com/IanLunn/Hover/master/myicon.svg" class="hvr-icon" /> </a>
在这里，图像将充当图标，因为它应用了类，当悬停在上面时，图标将按照父元素上的类的定义旋转。
hvr-icon
hvr-icon-spin
图标的位置完全由你控制。你可以将其放在文本之前，如下所示：
<a href="#" class="hvr-icon-spin"> <img src="https://raw.githubusercontent.com/IanLunn/Hover/master/myicon.svg" class="hvr-icon" /> Icon Spin </a>
或者使用自定义 CSS 根据需要定位图标。
包含哪些内容？
该项目由以下文件夹和文件组成：
.css
- 演示页面.css - 包含用于演示悬停的样式。你的项目中不需要
- hover-min.css - Hover 的缩小/生产版本.css
- hover.css - Hover 的开发版本.css
scss/更少
- 效果 - 包含分类到分类文件夹中的每个单独效果
- _hacks.scss/_hacks.less， _mixins.scss/_mixins.less， _options.scss/_options.less - Sass/LESS 实用程序
- hover.scss/hover.less - Hover的开发版本.css Sass 和 LESS 口味
其他
其他值得注意的文件包括：
- 索引.html - 演示所有悬停.css效果
- Gruntfile.js - 用于开发Hover.css通过Grunt。
浏览器支持
许多悬停.css效果依赖于 CSS3 功能，例如过渡、动画、变换和伪元素，因此，效果可能无法在较旧的浏览器中完全工作。
- 过渡和动画 - Internet Explorer 10 下不支持
- 转换 - 在 Internet Explorer 9 下不受支持
- 生成内容（伪元素） - Internet Explorer 8 下不支持
除了上述浏览器外，所有主流浏览器都支持Hover.css。请参阅 caniuse.com 以获取对许多 Web 技术的完全支持，并相应地测试你的网页。建议为较旧的浏览器应用回退效果，使用这些浏览器支持的 CSS 或功能测试库（如 Modernizr）。
使用 Grunt 进行开发
咕噜声不是必需的，但可以加快开发速度。安装 Grunt 后，从命令行运行以设置以 http://127.0.0.1:8000/ 或本地 IP 访问的开发服务器以进行网络测试。运行 Grunt 时，Sass 或 LESS 将被预处理（取决于你是否在 or 文件夹外工作），CSS 文件将被缩小。
grunt
scss
less
注意：最初，Grunt 被设置为自动前缀 CSS 属性，但为了使项目尽可能易于访问，情况已不再如此。Sass/LESS mixin 应该用于浏览器前缀。请参阅使用 Sass/LESS 进行开发和 [使用 LESS 进行开发]。
prefixed(property, value)
使用 Sass/LESS 进行开发
Sass/LESS不是必需的，但可以加快开发速度。使用你喜欢的软件或通过 Grunt 提供的环境预处理 Sass/LESS。
Sass/LESS 在 Hover.css 项目中用于将各种 CSS 分离到特定的文件中。每个效果都位于目录中自己的文件中。悬停.css还使用以下文件：
effects
.scss
.less
_黑客
包含应用于某些效果的黑客（不需要但通常是必要的代码行）。黑客在这里解释。
_mixins
包含和混合，用于将你在 / 中指定的必要前缀应用于属性和关键帧。
prefixed
keyframes
_options.scss
_options.less
属性可以像这样作为前缀：
- 屁股：
@include prefixed(transition-duration, .3s);- 少：
.prefixed(transition-duration, .3s);mixin 将传递要前缀的属性，后跟其值。
prefixed
关键帧可以像这样作为前缀：
- 屁股：
@include keyframes(my-animation) {
to {
color: red;
}
}mixin 传递关键帧名称，后跟使用 @content 指令的内容。
keyframes
- 少：
.keyframes(my-animation, {
to {
color: red;
}
});mixin 将传递关键帧名称，后跟内容，两者都作为参数。
keyframes
_选项
包含默认选项、各种效果选项和你要与 mixin 一起使用的浏览器前缀。默认情况下，只有前缀设置为（由于大多数浏览器现在不需要前缀）。
prefixed
-webkit-
true
从 开始，还包括一个 / 选项，允许你更改所有类都带有前缀的名称。默认命名空间为 。
2.0.0
_options
$nameSpace
@nameSpace
hvr
例如，/ 选项设置为 并将在其自己的类名下生成所有 Hover.css 效果。如果要将构成 Hover.css 效果的属性添加到你自己的类名中，请将此选项设置为 。
$includeClasses
@includeClasses
true
hvr-grow
false
为悬停做出贡献.css
如果你想贡献自己的效果，请参阅贡献指南。
许可证
Hover.css 根据你的要求，在免费的个人/开源或付费商业许可证下提供。要比较许可证，请访问 Ian Lunn 设计有限公司商店并在此处购买商业许可证。
个人/开源
对于个人/开源使用，Hover.css 在 MIT 许可下提供
- 在无限的个人应用程序中使用
- 你的应用程序无法出售
- 你的修改保持开源
- 免费更新
商业
对于商业用途，Hover.css 在商业、扩展商业和 OEM 商业许可证下提供。
商业许可证
- 在 1 个应用程序中使用
- 仅出售一次你的应用程序（例如，将网站出售给客户）
- 你的代码是专有的，归你自己所有
- 免费更新到主要版本
扩展商业许可证
- 在无限应用中使用
- 无限次出售你的应用程序（例如，在主题商店出售的网站模板）*
- 你的代码是专有的，归你自己所有
- 免费更新到主要版本
*允许最终用户生成单独应用程序的应用程序除外。请参阅 OEM 商业许可证。
代工商业许可证
如果你的应用程序使最终用户能够生成包含 Ian Lunn Design Limited 软件的单独应用程序，例如开发工具包、库或应用程序构建器，则必须获得 OEM 商业许可证。请联系我们以获取有关 OEM 商业许可证的更多信息。
MIT 许可证（v2.2.0 之前 / 2017 年 3 月 24 日）
Hover.css 以前在 MIT 许可证下提供，可用于商业和非商业用途。在 v2.2.0（2017 年 3 月 24 日）之前获得 MIT 商业用途许可证的任何人都可以在同一许可证下继续使用 Hover.css v2.2.0 之前的版本。
如果你想升级到 v2.2.0 或更高版本，或者只想表示对 Hover 的支持.css（我们将不胜感激！），请购买最新的商业许可证。购买商业许可证。
雇用伊恩·伦恩
Ian Lunn 是一名自由前端开发人员，也是 CSS3 Foundation 的作者。
聘请伊恩负责响应式网站、WordPress 网站、JavaScript、动画和优化。
