Hello, I have been trying to learn jQuery for the last couple of days, I’ve been reading lots of tutorials and messing around with it a bit and I think I have finally came up with my first working jQuery script.
In my last post I wrote about wanting to have the DIV’s on the home page of the site change background-color, border color, etc on hover and I thought I could do that with jQuery, alas after a bit of reading I could not get anything to work so I had to use the CSS :hover psuedo-class to achieve the effect, but I have been learning some more jQuery and although I am still a complete noob I think I have came up with my first jQuery script which will change a DIV’s style on hover.
Heres what you need to do:
First we will write our HTML code for the DIV
<div class="normal"> Hello World <br/> This is my first jQuery script. <br/> It's pretty cool. </div>
Notice that the DIV has a class of normal we will use this class in the jQuery script. Next we will write two CSS rules with two class selectors, one called .normal which will be the default look for the DIV and one called .hover which is what the DIV style will change to on hover
<style type="text/css">
/*this is the DIV's default CSS style*/
.normal
{
width:auto;
height:auto;
background-color:#FF6600;
border:5px solid #000;
color:#000;
padding:20px;
}
/*the DIV will change to this style when hovered over*/
.hover
{
width:auto;
height:auto;
background-color:#000;
border:5px solid #ff6600;
color:#fff;
padding:20px;
}
</style>
Now comes the exciting part we will write our jQuery code to make the effect happen
<script type="text/javascript">
$(document).ready(function(){
$(".normal").hover(function(){
$(this).addClass("hover")
});
$(".normal").mouseout(function(){
$(this).removeClass("hover")
});
});
</script>
As you can see it is a pretty simple script but it does the job, lets break it down.
$(document).ready(function(){
This is the first part of the jQuery script Everything inside the (document).ready function will load as soon as the DOM is loaded and before the page contents are loaded.
$(".normal").hover(function(){
$(this).addClass("hover")
});
This part gets the element (in our case the DIV element) with the class of .normal and adds the .hover event to it, we then can use the .addClass to add the CSS class ‘hover’ to the DIV when the mouse hovers over it.
$(".normal").mouseout(function(){
$(this).removeClass("hover")
This final part of the script is again getting the element with the class of .normal but this time we use the .mouseout event and add the .removeClass to it to remove the class called ‘hover’ when the mouse cursor is off the DIV.
That’s pretty much it, I hope someone will find this usefull, apologies if I don’t explain things very well, I really have no clue about programming but I am trying my best.
If you want to see the script in action take a look at the demo page.
