18
Aug
2012

Link description on hover

Posted in: jQuery , No Comments

jquery_logo
In this tutorial I will show you how to show a short description of a link on mouse hover.

Step 1:
Prepare a navigation links. Each link should have separate ID

<a href="#" id="home">Home</a> / <a href="#" id="blog">Blog</a> / <a href="#" id="forum">Forum</a> / <a href="#" id="contact">Contact</a>

Step 2:
Call jQuery library. I am using Google CDN hosted jQuery library.
You can use alternative method to call jQuery library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3:
Now add below jQuery code

<script type="text/javascript">
$(document).ready(function() {

$("#home").hover(function(){
$("#description").html("Go back to homepage")
});

$("#blog").hover(function(){
$("#description").html("Latest news")
});

$("#forum").hover(function(){
$("#description").html("Discussion board")
});

$("#contact").hover(function(){
$("#description").html("contact us")
});
});
</script>

Explanation of above jQuery code


when we hover over ID #home jQuery will insert text “Go back to homepage” in ID #description and display it.

Similarly for other links Blog, Forum, Contact


Check Live Demo

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply