As you can see in our previous articles for jQuery tips and tricks, this Javascript library can finish almost all we want to do.

We can get DOM nodes, access and change their values, create or remove elements on the fly... And now we'll provide a simple way for changing CSS style of an element.

Like in our other examples, here is a part of HTML file that will serve to our goal:

<div id="testdiv">Button</div>

jQuery code for changing background color of the div element to red and text color to white when you move your mouse over the Button text

$(document).ready(function() {
    $('#testdiv').mouseover(function(){
        $('p').css({
            'background-color':'red',
            'color':'white'
        });
    });
});

The method .css() takes two parameters property and value:

.css(property, value)