Question

I have an input, when someone hovers over the input I want it’s BGcolor to change to gray, then when they hover off of the input I want it’s BGcolor to change back to white(default color). But I also want the input’s BGcolor to change to gray when there’s focus on the input, but when the person has focus on the input, and then moves the cursor off of the input, the BGcolor will change back to white even if the input has focus. So basically I want the mouseover mouseout functionality to be disabled when the input box has focus, and then when it doesn’t have focus anymore, re-enable the mouseover mouseout functionality.

Can anyone help me out? I’m not sure how to do this…

Answer 1

More generally, to detect whether an element has focus you might want to flag it somehow in its onfocus handler and clear the flag in its onblur handler. The ‘flag’ could take a number of forms, but a nice way of doing this in jQuery is to add/remove a class, which you can then check for elsewhere. For example:

$('input.trackingFocus').focus(function(){
    $(this).addClass('hasFocus');
});
$('input.trackingFocus').blur(function(){
    $(this).removeClass('hasFocus');
})

$('input.trackingFocus').hover(
    function(){
        // do stuff on mouse in
    },
    function(){
        if ($(this).hasClass('hasFocus')) {
            // do stuff on mouse out for elements with focus
        } else {
            // do stuff on mouse out for elements without focus
        }
    }
);