MooHover - MooTools 1.2 hover buttons
The class replaces links with a hover effect transition on the background image.
To do that, it wraps the element in a div ( the .default class ) that has as background the default position image of your button.
On the link or submit button ( the .MooTrans class ) it uses as background image the hover image.
All CSS is external, so you only need to make changes into your stylesheet.
Required To use this script, download MooTools 1.2 Core with these modules:
- Core : all
- Native : all
- Class : all
- Element: Element, Element.Event, Element.Style
- Utilities: Selectors, DomReady
- Fx: Fx, Fx.CSS, Fx.Morph, Fx.Transitions
Usage
Include both files (MooTools Core and MooHover) into the document head section.
Create an instance of MooHover to start using it:
window.addEvent('domready', function(){
new MooHover();
});
MooHover supported parameters:
new MooHover();
});
- container: the element containing the anchors or buttons replaced (default:document)
- className: the hover class (default:MooTrans)
- defaultClass: the default button class (default:default)
- duration: the hover effect duration in ms (default:400)
- transition: the hover effect transition (default:Fx.Transitions.Sine.easeOut)
Example 1: anchors
Example 2: submit button
