MooHover – CSS hover the MooTools waySaturday, January 3rd, 2009 in Mootools
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)
The class uses the following MooTools 1.2 Core modules:
- Core : all
- Native : all
- Class : all
- Element: Element, Element.Event, Element.Style
- Utilities: Selectors, DomReady
- Fx: Fx, Fx.CSS, Fx.Morph, Fx.Transitions
and start using the class by creating an instance of the class on domready
If any positioning problems should arise, please remember that the elements having the hover effect on them are individually wrapped into divs having as CSS class the defaultClass parameter and you should use positioning on that one and not on the link and/or button.
For navigation purposes, to set an element as hovered or selected (to display a different background image to highlight the link or button), set rel=”selected” on that particular element:
<a class="MooTrans" rel="selected" href="#">Link 2</a>