Clever Geek Handbook

Form input style ancestor element: focus (jQuery)

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

I can't go back to the DOM to fix this with CSS, so can anyone suggest some lines of jQuery?

thank

+1


source to share


3 answers 


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


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

+3


source 


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


+1


source


The closest jQuery is also an option.

closest( selector )
    .closest( selector )
    .closest( selector, [ context ] )
closest( selectors, [ context ] )
    .closest( selectors, [ context ] )

In the description .. Get the first ancestor element that matches the selector, starting at the current element and progressing through the DOM tree.

http://api.jquery.com/closest/

0


source






More articles:


All Articles