Question

Please be patient with me, as I am a fairly new programmer and am extremely unfamiliar with client-side programming. This is my first live project and I wish to do quite a few things that I do not have the knowledge of.

The page in question can be found at http://paysonfirstassembly.com/

I am attempting to accomplish a fairly simple task. I need to change the background color of a specific element (Can be referred to by ID, of course) when it is hovered over. I know that there are other methods of doing this, but frankly, my brain is fried from being sick.

Also, if it helps, I AM using JQuery.

Answer 1

You use CSS, not jQuery for things like this.

In your stylesheet, just add a :hover selector to the CSS style of an element. This new style deceleration gets rendered when the element is hovered:

#original_element {
  background-color: blue;
}

#original_element:hover, .hover {
  background-color: red;
}

To support those poor people with IE6 and JS (this works for those without JS too), you can use a jQuery function:

$('#original_element').hover(function() {
  $(this).addClass('hover');
}, function {
  $(this).removeClass('hover');  
});