MooHover – CSS hover the MooTools way
Saturday, January 3rd, 2009 in Mootools
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)
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
To use it, insert into the head section of your HTML document the two JavaScript files
1 2 | <script src="script/mootools-1.2.1-core.js" type="text/javascript"><!--mce:0--></script> <script src="script/MooHover.js" type="text/javascript"><!--mce:1--></script> |
and start using the class by creating an instance of the class on domready
1 | <script type="text/javascript"><!--mce:2--></script> |
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:
1 | <a class="MooTrans" rel="selected" href="#">Link 2</a> |
Related posts
Was this useful? Show your support.
27 comments
Love your tutorials, keep them coming!
Looks like I got a fan
. Thank you!
Please post here any problems/enhancements you might have regarding this script.
Heh I was just about to ask you why you don’t use any of the scripts you make on your site. But you do!
Nice custom fonts you got going on. And the sliding navigation on the left is pretty nifty
I did used these scripts at least one time in some of my projects. And since I became a full time freelancer (and man, what a great idea was that!), I thought it would be nice to share them since all I’ve learned so far came from older, wiser people in this domain who kindly shared with us and still do.
As for the little tweaks you mentioned and the design, they came from my good friend Bogdan (bogdanpavel.com) who looks like has more imagination than I do. That’s why I’m the web programmer and he’s the designer
It’s the combination of programming and designing that makes things work beautiful
Must say that your friend’s site is probably the best flash site I have ever seen…I can only imagine the amount of time and work he’s put into that. That flying bird is just way too cool and the simple old woodish colors. Great combination.
The button text seems to change font or losses anti-aliasing when hovering over it.
Anyone know how to fix this?
If this is happening in IE, try setting a background-color on .MooTrans. It looks like the opacity filter in IE displays the text jagged if this is not set. The funny thing is that this behavior is not present in all IE installations even if the same version is on.
I tried the background-color but with no luck.
This issue happens in both FF and IE for me. If you look in the picture at the “N” you can see it looks different. It becomes thinner and has no anti-aliasing.
http://i40.tinypic.com/23sj7rp.jpg
Can you give me a link to take a look at the actual page? Is the demo on this tutorial looking the same?
Helo…
can we submit forms on the slider next button …can u implement that process ????
What slider are we talking about here?
Hey thanks for this tutorial
Just one problem:
What if i want a text-line below that centered button text. And this line formatting should not change while hovering the button.
I absolutely dont get it, do you have any clues? Thanx in advance!
I don’t quite get it. Simply add a text after the link. Probably you should use a container for both. An example would be helpful to see what you want to achieve.
How do you create it for two different buttons? I have two different looking buttons on my site that I want to create hover effects for – the code provided only allows for 1 background for all buttons. Can you provide example how to code an x number of different buttons? Thanks!
Hi Jeffrey,
To make two or more different looking buttons, you simply create your CSS classes ( see stylesheet for .MooTrans and .default ) with a different background/look and make a new instance of MooHover to play with the new elements.
For example, let’s say you create a default class called .MyButton { some styling here } and the mouse over class called .MouseOver { different styling here }. To assign this to a new set of buttons, you do this:
new MooHover({container:’some element id containing all buttons’,className: ‘MyButton’, defaultClass:’MouseOver’, duration:500});
Give it a try and let me know if this helps. If you run into trouble, put whatever you done somewhere online and post the address here so I can take a look.
Hi again Constantin, I don’t know if my last comment went through so I am writing again just in case. I am still having issues creating the 2nd styled button. You can view a demo I created here:
http://pledgetothecause.com/moohover/
1st button works fine of course but the 2nd is what is having issues. Let me know what I am doing wrong or what I am missing, I thought I did everything correctly. Thanks in advance!
Hi Jeffrey,
In your example, you used both instances from my demo. You don’t need the second since you’re not using the form button, but you need a second instance for the second button. So, in your demo, instead of this:
new MooHover({container:’form_example’,className: ‘MooButton’, defaultClass:’defaultMooButton’, duration:500});
do this:
new MooHover({container:’menu-hover’,className: ‘StoreTrans’, defaultClass:’defaultStoreButton’, duration:500});
Let me know how’s that.
awesome, so everything works great but once i implement it into my actually site – i believe it breaks because of another mootools package that already exists for a slideshow that is running on my index page:
http://www.captainapticus.com/beta/index.php
is there any way to make these two work together? i noticed your package contains 1.2.1-core.js for mootools and the slideshow is up to 1.2.2. Let me know if there is anything that can fix this, thanks again!
Hey Constantin, sorry, I was initially going to resort to another method but really love this slick transition of the hover. Please check the URL again, I removed password protection:
http://www.captainapticus.com/beta/index.php
Let me know if there is a way the slideshow script and hover scripts can co exist together. Thanks
i just removed password protection so be sure cache is cleared, also, here is the stand alone demo of the hover buttons:
http://www.captainapticus.com/beta/moohoverdemo/
after implementing it into my site it breaks
Hi Jeffrey,
If you check the source code of your page here: http://www.captainapticus.com/beta/index.php, you’ll notice that between lines 31-40 you add the MooHover script. A bit down, between lines 50-93, again you add the MooTools framework into your page and do some tricks there. This won’t work.
I assume the most simple scenario: for MooHover, you did everything manually adding the lines between 31-40 directly into your header.php theme file. Also, I assume that the code between lines 50-93 gets added by a plugin. If that’s the case, try moving the MooHover code AFTER the other code and when you add MooHover, since the Moo framework is already in, don’t add that anymore. Let me know if it works like that.
Constantin, success but only 50% of the way. One of the buttons works and the other is still having issues. I am going to delve into it a little further but might run into more roadblocks. Maybe you can find the solution quicker than me? I will let you know my progress, if you have any solutions to why only one of the buttons works, let me know. Thanks for all the help thus far, its truly appreciated.
PROBLEM SOLVED! it lied in the fact that the second href was in a separate div. i simply created another div style in the stylesheet and also called it out separately in the javascript code. thanks Constantin for all your help! if you have an answer to my last question about good placement practices it would also be appreciated. thanks again
another question beyond this script – is it considered bad practice to place javascript below the header tags? i am just wondering if I could isolate the javascript for an element on the home page of a website to be coded into the index.php page only rather than have to place it in the header.php file. this way it will also be non-existent from all other pages of the website = faster loading time. let me know if that is ok to do or if that’s considered bad practice. thanks
It’s a tricky question. If you check Yahoo’s best practices for speeding up your website, one of the rules is to actually put scripts at the bottom. Makes sense if you think of it. On the other hand, the header is a common place to look for any scripts that get loaded in page. So, I can’t tell for sure what is what. As a note, I commonly put scripts in head section.
Was there ever a solution to JR’s issue, I’ve had this opacity problem a lot and would love to finally solve it. I actually fixed it once on bretbycc.co.uk using the background color trick.
On a ticker with a gradient background, this is not working
I never encountered this issue. Do you have an online demo?
Leave a comment