0

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.

Improve this question

4 Answers 4

Reset to default
3

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');  
});
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Awesome, thank you. I was unaware that CSS had such a property!
@Blender: Is this now cross-browser compatible solution for ANY html element?
It's always best to use CSS when possible. but :hover doesn't work in IE6, since you're already using jQuery, it makes sense to use jQuery's hover for cross browser support
@Hussein: While that is a valid point, I will use CSS solely because I am personally unaware of a machine with IE6 installed. :P Not to mention the number of machines I am aware of with IE installed... Except at the school, haha.
Oh, and a possible fix for IE6. It's a bit overkill, but hey, if it works it works: danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector
|
2 
$(ELEMENT).hover(
    function(){
        $(this).css('background-color','red');
    },
    function(){
        // this is for 'mouse-out' event
    }
);

Btw: It's better to assign css class, that has that background color set (+ any additional styles), then you can do this:

$(ELEMENT).hover(
    function(){
        // add your css class to hovered element
        $(this).addClass('highlightClass');
    },
    function(){
        // this is for 'mouse-out' event
        // and we are going to remove that highlight
        $(this).removeClass('highlightClass');
    }
);

Css class could be:

.highlightClass {background-color:yellow;}
Improve this answer

4 Comments

Oh my lord I love this community. Such fast answers! :D Are you aware of what the mouse-out event would happen to be using jquery?
@Penumbra: Haha, me too :) I edited my answer to show you example how to use that mouseout part.
Fantastic, so the part of the .hover function after the comma is like passing in a second parameter which jquery recognizes as the mouseout event? Also, does anything special need to be done to have two CSS classes on one element?
@Penumbra: Yes, you could say it like that probably :) You can have any number of class on element.
1

You may look for this:

$(selector).hover(
    function() { $(this).css('background-color', 'red'); },
    function() { $(this).css('background-color', 'green'); },
);
Improve this answer

Comments

1 
$('#test').hover(function() {
    $(this).css('backgroundColor', 'blue')
}, function() {
    $(this).css('backgroundColor', 'red')
})

Check working example at http://jsfiddle.net/KW5mJ/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.