Style ancestor element of form input:focus (jQuery)

Question

I have a form with a DIV, 3 INPUTS, each INPUT sits within a LABEL element. I would like to change the background image of the DIV element when focusing on each INPUT.

I can't move back up the DOM to fix this with CSS, so could someone suggest a few lines of jQuery please?

Thanks

Answer 1

$('input').focus(function(){
    $(this).parent().parent().addClass('highlight');
}).blur(function(){
     $(this).parent().parent().removeClass('highlight');
});

Answer 2

$('div input').focus(function(){
    $(this).parents('div:eq(0)').addClass('specialCSSclass');
}).blur(function(){
    $(this).parents('div:eq(0)').removeClass('specialCSSclass');
});

You would need to create a class in your CSS and then replace "specialCSSclass" with it.

Answer 3

@JimmyP + @Pat

Thanks for the responses; both work of course - so I don't want to mark one as 'the answer' over the other..!

I used a combination of the two in the end, very helpful.