Add element to change with existing onblur

Question

I would like a separate DIV that's holding the input to also change in background color. How would I add it to my existing code that works?

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("input:[type=text]").focus(function () {
 jQuery(this).addClass("highLightInput");

});
jQuery("input:[type=text]").blur(function () {
jQuery(this).removeClass("highLightInput");
});
    });
 </script>

Answer 1

<script type="text/javascript">
$(document).ready(function() {
$("input:[type=text]").focus(function () {
 $(this).addClass("highLightInput");
$(this).parent('div').addClass('highlight');

});
$("input:[type=text]").blur(function () {
$(this).removeClass("highLightInput");
$(this).parent('div').removeClass('highlight');
});
    });
 </script>

Answer 2

Stop messing around with JavaScript for something that can be solved with CSS. The only limitation is that it will not support IE6/7

textarea.yourClass {
    width: 100%; 
    background: white url('iamges/img.png') no-repeat 50% 50%; 
    color: grey;
}
textarea.yourClass:focus {
    color: #444; 
    background: none;
}

If you do need to support IE6/7, then use above JS methods