# Hover.css
<a href="https://www.buymeacoffee.com/ianlunn" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-blue.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" width="217" height="51" ></a>
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
[Demo](http://ianlunn.github.io/Hover) |
[Tutorial](http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/)
## Contents
- [Download/Install](#downloadinstall)
- [How To Use](#how-to-use)
- [A. Copy and Paste an Effect](#a-copy-and-paste-an-effect)
- [B. Reference Hover.css](#b-reference-hovercss)
- [A Note on the display property](#a-note-on-the-display-property)
- [Using Icon Effects](#using-icon-effects)
- [What's Included?](#whats-included)
- [css](#css)
- [scss/less](#scssless)
- [Other](#other)
- [Browser Support](#browser-support)
- [Using Grunt for Development](#using-grunt-for-development)
- [Using Sass/LESS for Development](#using-sassless-for-development)
- [_hacks](#\_hacks)
- [_mixins](#\_mixins)
- [_options](#\_options)
- [Contribute to Hover.css](#contribute-to-hovercss)
- [Licenses](#licenses)
- [Commercial License](#commercial-license)
- [Open-Source License](#open-source-license)
- [Hire Ian Lunn](#hire-ian-lunn)
## Download/Install
- NPM: `npm install hover.css --save`
- Bower: `bower install hover --save`
- [Download Zip](https://github.com/IanLunn/Hover/archive/master.zip)
## How To Use
Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
### A. Copy and Paste an Effect
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download `css/hover.css` in its entirety.
Assuming you want to use the Grow effect:
1. Download Hover.css
2. In `css/hover.css`, find the Grow CSS (each effect is named using a comment above it):
```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);
}
```
3. Copy this effect and then paste it into your own stylesheet.
4. In the HTML file which you'd like the effect to appear, add the class of `.hvr-grow` to your chosen element.
Example element before applying Hover.css effect:
```html
<a href="#">Add to Basket</a>
```
Example element after applying Hover.css effect:
```html
<a href="#" class="hvr-grow">Add to Basket</a>
```
**Note**: As of `2.0.0` all Hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the `$nameSpace`/`@nameSpace` variable in `scss/_options.scss` or `less/_options.less`.
### B. Reference Hover.css
If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.
1. Download `hover-min.css`
2. Add `hover-min.css` to your websites files, in a directory named `css` for example
3. Reference `hover-min.css` in `<head>` of the HTML page you'd like to add Hover.css effects to:
```html
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
```
Alternatively you can add a reference into an existing stylesheet like so (this may be useful to WordPress users who are unable to edit HTML):
```css
@import url("hover-min.css");
```
4. Assuming you want to use the Grow effect, in the HTML file you'd like to use this effect, add the class of `.hvr-grow` to your chosen element.
Example element before applying Hover.css effect:
```html
<a href="#" class="button">Add to Basket</a>
```
Example element after applying Hover.css effect:
```html
<a href="#" class="button hvr-grow">Add to Basket</a>
```
### A Note on the `display` Property
To make an element "transformable", Hover.css gives the following to all elements it is applied to:
```css
display: inline-block;
vertical-align: middle;
```
Should you wish to override this behavior, either remove the above CSS from Hover.css or change the `display` property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss` or `less/_hacks.less`.
For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).
### Using Icon Effects
To add a Hover.css icon, place the icon HTML inside the element that a Hover.css effect is applied to. For example:
```
<a href="#" class="hvr-icon-forward">
Icon Forward
<i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>
```
In the above code, we have given a link element a class of `hvr-icon-forward` which will make an icon move forward when the link is hovered over. The icon itself is given a class of `hvr-icon` to let Hover.css know that this is the icon we want to animate. In this example, our icon is from FontAwesome, which we've loaded into the `<head></head>` of our web page as per FontAwesome's instructions, like so:
```html
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
```
Note: As of Hover.css v2.3.0 you can use any method you like for adding icons (previously, only FontAwesome was supported out-of-the-box.) For example, you could use another icon library or instead, use an image like so:
```
<a href="#" class="hvr-icon-spin">
Icon Spin
<img src="myicon.svg" class="hvr-icon" />
</a>
```
Here, the image will act as the icon because it has the `hvr-icon` class applied to it, and when hovered over, the icon will spin as defined by the `hvr-icon-spin` class on the parent element.
Position of the icon is entirely in your control. You could place it before the text, like so:
```
<a href="#" class="hvr-icon-spin">
<img src="myicon.svg" class="hvr-icon" />
Icon Spin
</a>
```
Or use custom CSS to position the icon as you see fit.
## What's Included?
The project consists of the following folders and files:
### css
- **demo-page.css** - Contains styles to demonstrate Hover. Not required in your projects
- **hover-min.css** - The minified/production version of Hover.css
- **hover.css** - The development version of Hover.css
### scss/less
- **effects** - Contains each individual effect sorted into categorized folders
- **_hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less** - Sass/LESS Utilities
- **hover.scss/hover.less** - Development version of Hover.css in Sass and LESS flavours
### Other
Other files of note include:
- **index.html** - Demonstrates all Hover.css effects
- **Gruntfile.js** - Used for [development of Hover.css via Grunt](#using-grunt-for-development).
## Browser Support
Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.
- [Transitions](http://caniuse.com/#search=transitions) and [Animations](http://caniuse.com/#search=animations) - not supported below Internet Explorer 10
- [Transforms](http://caniuse.com/#search=transforms) - not supported below Internet Explorer 9
- [Generated Content (pseudo-elements)](http://caniuse.com/#search=pseudo-ele
hover.css前端ui库 （250个子文件） 
hover.css 112KB hover-min.css 93KB demo-page.css 9KB .editorconfig 206B .gitignore 120B
index.html 19KB
hover.jpg 6KB Gruntfile.js 2KB bower.json 731B package.json 615B hover.less 15KB _icon-buzz-out.less 1KB _options.less 989B _shadow-radial.less 965B _buzz-out.less 960B _float-shadow.less 945B _icon-hang.less 911B _icon-bob.less 911B _outline-in.less 850B _icon-wobble-horizontal.less 820B _icon-wobble-vertical.less 812B _curl-top-left.less 783B _mixins.less 771B _wobble-to-top-right.less 758B _bob.less 749B _hang.less 749B _hacks.less 740B _icon-drop.less 733B _wobble-to-bottom-right.less 715B _bounce-to-bottom.less 707B _bounce-to-left.less 706B _bounce-to-right.less 705B _bounce-to-top.less 704B _bubble-float-bottom.less 680B _bubble-float-right.less 676B _shutter-out-horizontal.less 675B _bubble-float-left.less 673B _shutter-in-horizontal.less 673B _bubble-float-top.less 671B _shutter-out-vertical.less 671B _wobble-horizontal.less 671B _shutter-in-vertical.less 669B _wobble-bottom.less 665B _wobble-vertical.less 663B _radial-out.less 655B _radial-in.less 653B _wobble-top.less 653B _curl-bottom-right.less 647B _icon-push.less 643B _curl-bottom-left.less 642B _back-pulse.less 640B _icon-pop.less 640B _curl-top-right.less 637B _sweep-to-bottom.less 635B _sweep-to-left.less 634B _sweep-to-right.less 633B _sweep-to-top.less 632B _outline-out.less 628B _rectangle-out.less 619B _wobble-skew.less 619B _rectangle-in.less 617B _ripple-in.less 588B _icon-pulse-shrink.less 581B _icon-buzz.less 579B _ripple-out.less 578B _icon-pulse-grow.less 574B _icon-bounce-out.less 573B _reveal.less 552B _underline-reveal.less 551B _bubble-bottom.less 549B _overline-reveal.less 547B _bubble-right.less 546B _bubble-left.less 546B _bubble-top.less 543B _icon-pulse.less 542B _icon-float-away.less 537B _icon-sink-away.less 531B _underline-from-center.less 513B _overline-from-center.less 508B _underline-from-right.less 490B _underline-from-left.less 490B _trim.less 489B _overline-from-right.less 485B _overline-from-left.less 485B _border-fade.less 482B _icon-down.less 482B _icon-up.less 473B _icon-bounce.less 470B _box-shadow-inset.less 443B _icon-grow-rotate.less 435B _buzz.less 430B _pulse-shrink.less 430B _pulse-grow.less 423B _icon-rotate.less 414B _icon-grow.less 403B _icon-float.less 397B _icon-forward.less 396B _icon-sink.less 394B _icon-shrink.less 392B _pulse.less 392B共 250 条
- 1
- 2
- 3
资源评论
