Simple Hover Effect Using JQuery
This time we will study about how to bring about a hover effect on an object using JQuery.We will create a menu like structure using basic html and show hover effects on the menu on which the mouse is hovered on.View Demo
Fist we create the basic HTML for this.Here is the basic HTML we will be using
<html>
<head>
<title>Simple Slide Panel Using jQuery</title>
</head>
<body>
<form id="myform">
<div>
JQuery is a JavaScript library that emphasizes interaction
between JavaScript and HTML.
</div>
<div>
JQuery simplifies the use of JavaScript and also can
enhance your web application by adding a lot of
professionalism and usability.
</div>
<div>
It is a great tool for webmasters as JQuery is SEO
friendly too,which makes it a better option than Flash.
</div>
<div>
JQuery exists as a single JavaScript files which
contains the DOM,Events,effects and Ajax functions
</div>
</form>
</body>
</html>
Now we will add some CSS styling.For actually distinguishing between the hovered mode and the normal mode,we need to stylize them in two different styles.Here is the CSS code i have applied.
<style type="text/css">
.pane{
height:100px;
width:200px;
color:#FFFFFF;
border-color:#FFFF00;
border-style:groove;
background-color:#000000;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.paneHover{
cursor:hand;
height:100px;
width:200px;
color:#FFFFFF;
border-color:#000000;
border-style:inset;
background-color:#FF6633;
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
Ok,now we can apply the JQuery script to our page.What we will be doing is add the “paneHover” class when the mouse is over the particular div and remove the “paneHover” class when the particular div is returned to normal mode.Again we are using the minified version of the JQuery script here.Here is the JQuery script.
<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pane").hover(function()
{
$(this).addClass("paneHover");
},
function()
{$(this).removeClass("paneHover");}
);
});
</script>
Download Simple Hover Effects Source
Related posts:
Leave your response!