MooHover - MooTools 1.2 hover buttons

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:
  • 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

Quick links: Have you found this useful? Support it by donating.