Link Hover Effects With jQuery

The HTML structure for each menu is as follows:

<!-- #menu2 menu-wrapper begins -->
<div id="menu2" class="menu-wrapper">
    <div class="menu">
	    <ul>
		    <li> <a href="#"> Hyperlink </a> <em> This is a hyperlink </em> </li>
		    <li> <a href="#"> Hyperlink </a> <em> This is a hyperlink </em> </li>
		    <li> <a href="#"> Hyperlink </a> <em> This is a hyperlink </em> </li>
		    <li> <a href="#"> Hyperlink </a> <em> This is a hyperlink </em> </li>
	    </ul>
    </div>
</div>
<!-- menu-wrapper ends -->

We have already hidden the element using jQuery to achive fine results:

$(' .menu em ').hide();

Lets have a look at the first menu

Menu 1

Here we performed a simple task. On hovering each link <a href="#"> its sibling element change its relative position which by default is set as follows :

em {
    position: absolute;
    top: -20px;
    }

to these values using jQuery on mouse in :

$(' #menu1 a ').hover(function(){
    $(this).siblings('em').show();  → for unhiding the <em> element

    $(this).siblings('em').animate({ top: '-10px' }, 'slow');

↑ this slowly changes the absolute position of the  element

All this happened on mouse in and now have a look what happens on mouse out :

}, function(){
    $(this).siblings('em').animate({ top: '-40px' }, 'slow');
    });
↑ this again changes the absolute position and opacity values back to the defaults which we have declared in our stylesheet.

That is all about this list menu containing minor hover effects which are achived using jQuery's power.

Now lets check what's in our second menu.

Menu 2

You might have noticed fade In and fade Out effects on hovering the links in our second menu. That the addition which seperates this menu from the previous one.

Here we have added opacity effects along with the sliding effects.

On hovering each link its which is hidden by default slowly fades In and Slides Down

See the code :

$(' #menu2 a ').hover(function(){
    $(this).siblings('em').animate({ opacity: 'show', top: '-10px' }, 'slow');
On mouse In Changes the Opacity value to show and absolute top position to -10px.
        }, function(){
               $(this).siblings('em').animate({ opacity: 'hide', top: '-20px' }, 'slow');
});
On mouse Out This again changes the Opacity value to hide and absolute Top position to -20px.

That was our second menu with Opacity effects added to it. Now let's know what's added in our third menu.

Menu 3

Assuming that you have already checked the third menu above. It has got additional horizontal positioning effects with a different background and text color for the element.

In the jQuery Code for this menu we have first changed the absolute left position of the element. See the code :

$(' #menu3 em ').css({ left: '-10px' });

The rest of the code follows as :

$(' #menu3 a ').hover(function(){
 $(this).siblings('em').animate({ opacity: 'show', top: '-10px', left: '0' }, 'slow', function() {
Most of this part is explained in the previous sections. The added declaration is the left: '0' attribute which changes the absolute position of the element from 0 (See above) which appear as a top left to center sliding animation.
 $(this).css({ background: '#000000', color: '#FFFFFF' });
		 On mouse In this part changes the Background Color to Black and Text Color to White of the element. 
 );
 }, function(){
 $(this).siblings('em').css({ background: '#E6DCC8', color: '#333333' }).animate({ opacity: 'hide',
This part again changes the Background and the Text Color back to their defaults.
				top: '-20px', left: '20px' }, 'slow',
Here we again change the absolute position of the element which appears as a center to top right sliding animation.
 function() {
 $(this).css({ left: '-10px' });
	 This is done to set on its default position to achive the same effect on next hover. 
 }
 );
});

That's all about for achiving nice Hover Effects on Links With jQuery.

Further you can add many animations and styles to your jQuery powered menus.

enjoy