MooHover is a MooTools 1.2 JavaScript class that replaces regular links and form buttons with hover effect transition between two different images, giving a flash like aspect to links and/or button and submit form inputs. This plugin is intended to be a stylish replacement of the CSS hover declaration. If JavaScript is by some reason disabled or not working, the page will display the default instance of the elements replaced.
The effect is obtained by wrapping each element into a container div having as background image the default button instance and then playing with the element opacity that has the hover instance as background image.
All CSS styles are external and the HTML code on page is minimal, meaning that only links and buttons are present, without any additional containers for them.
The script is approximately 800 bytes in size compressed using Yahoo’s YUI Compressor. Also, it allows some parameters to be set when creating an instance, mainly for the purpose of letting the user use any CSS classes he/she might need, without changing the HTML source:
- 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)
