.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here



Posted by Aamir Hasan   on Sunday, December 4, 2011 Total Views:  

Recently asked from me that how to create a simple function, as mouse move background color of defined area will automatically change and when mouse leave the specific area previous color will come back. So, I have created a simple hover effect jQuery plugin. By writing a jQuery plugin, you can save the developer time and can easily use in your web site application.

In this article, we will learn how to create a simple hover effect jQuery plugin.


Step 1: Firstly, I have created plugin JavaScript file with named AamirHasan.HoverEffect.js and add the Microsoft CDN jQuery library and AamirHasan.HoverEffect.js plugin reference inside head section of aspx page as shown below.

<script src=""


    <script src="AamirHasan.hovereffect.js" type="text/javascript"></script>


Step 2: In this js file, I have added new function to jQuery.fn Object. For Default settings I have used $.extend. $.extend to combine more than one object into first object. By using Namespacing, you can avoid with conflict with other plugin with same name.

Step3: Copy and paste the following code inside the AamirHasan.HoverEffect.js file.




            var defaults ={




            var options = $.extend(defaults, options);





                    $(this).css("background-color", options.backgroundColor)},










Step 4: Save and close plugin file.

In the above jQuery plugin, I have added backgroundColor parameter. Now, you can use this HoverEffect plugin.

Let us see the code.

<!DOCTYPE html>


<head runat="server">





            background-color: #eaeaea;

            border: 1pxsolid#999;

            width: 400px;

            height: 200px;

            padding: 20px;



    <script src=""


    <script src="AamirHasan.hovereffect.js" type="text/javascript"></script>

    <script type="text/javascript">








    <form id="form1" runat="server">

    <div id="msg">

        .NET Articles<br/>

        Author:Aamir Hasan





By adding jQuery library, will come to know that you are extending the methods.  We can call the Hovereffect on any contents of the page.

Example 1

    <script type="text/javascript">





Example 2

    <script type="text/javascript">





Example 3

    <script type="text/javascript">


           $('#example3 tr').HoverEffect({backgroundColor:"#FF0"});





I have tested this example on following browsers:

  • Internet explorer 9 & 10

  • Firefox 7.0

  • Chrome 12.0

  • Opera 12

  • Safari

Download (1.42 kb)

See live demo

Protected by Copyscape Online Plagiarism Tool

Comments (6) -

Ahmed Saudi Arabia
12/6/2011 2:24:55 AM #

أشكركم على المشاركة.

Maxman United States
12/12/2011 1:56:13 AM #

I want to say thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader. Ton of thanks.

vimax United States
1/1/2012 1:28:50 PM #


john United States
1/5/2012 7:28:06 AM #

Excellent work, keep it up

adfasdf United States
4/8/2012 4:47:18 AM #


y United States
4/12/2012 9:21:05 AM #


Ozella Rehm
Ozella Rehm United States
3/28/2017 3:45:54 AM #

Mar 13, 2017 - Купить АлкоБарьер средство от алкоголизма в Актобе “У меня были проблемы в жизни, и мне казалось,что с помощью алкоголя я могу ...

leasbian milfs
leasbian milfs United States
8/30/2017 6:09:01 PM #

please post more

Bitcoin pharmacy
Bitcoin pharmacy United States
12/8/2017 5:43:41 PM #

tbhanks for the info

sarah palin is a milf
sarah palin is a milf United States
1/11/2018 12:57:48 PM #

feel free to talk to me

소셜그래프추천 United States
5/11/2021 10:51:52 AM #

Really when someone doesn’t understand then its up to other people that they will assist, so here it happens.

ahjwpennyd United States
5/31/2021 12:35:35 AM #

It’s an remarkable paragraph in favor of all the internet users; they will get advantage from it Iam sure.

Norah Parra
Norah Parra United States
6/20/2021 10:17:14 AM #

I had been very pleased to locate this web-site. I wanted to thanks for your coming back this wonderful go through!! I definitely enjoying every single little bit of it and I have an individual bookmarked to see new stuff you weblog post.

Add comment

  Country flag

  • Comment
  • Preview

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5