home

Jquery Css Manipulations

Here i am going to explain about Jquery and css class manipulations with example and demos, i have div it has three b tags (b=bold), in the starting of the jquery code as usually same like document.ready function ("$(document).ready(function(){});") inside the function p tag $("p") when your must enter on that time class needs to apply in the next line used attribute called addClass (*C should be capital) inside parentheses opened string and closed between that applied two class called class1, class2 and even same thing for mouse out also inside the mouse out function i used attribute called removeClass (*C should be capital) in the time whatever class applied in the first line that will get removed in the second function see the demo example of the jquery css classes.

Jquery code

Jquery code, for example, code copy it and past edit in your style by the doing small changes. like change class name or changing event anything you can practice.

$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("class1 class2");
});

$("p").mouseout(function(){
$(this).removeClass();
});
});

example code demo

Check this demo what is happening by default text is the small font with black color when your mouse over on the text it is changing the things like increasing font size with red background color.

paragraph one
paragraph two
paragraph three

Html code

This is the html demo code which we are seeing on the top with tags and properties.

<p>
<b>pragraph one</b>
<b>pragraph two</b>
<b>pragraph three</b>
</p>

Css code

Css code for the demo it will make more attractive the demo, without css its looks hard.

.class1{
background-color:#f00;
color:#FFF;
}
.class2{
text-decoration:underline;
}