Change CSS properties in focus

Question

Is there a way to change the border of the CSS div when the input field gets focus (for example, when it loses focus, removes the border).

HTML:

<input type="text" name="title" id="title"></input>
<div id="mainTitle">The Main Title</div>

CSS

#mainTitle {
    border: 1px solid #ccc; 
}

Answer 1

$(function() {      //aka document.ready
    $("input#title").focus( function() {
        $("div#mainTitle").css("border","1px solid #ccc");
    });

    $("input#title").blur( function() {
        $("div#mainTitle").css("border","");
    });
});

Answer 2

You could just use css if your users are working in a competent browser (like that, and not in IE, for the most part):

input:hover + #mainTitle,
input:focus + #mainTitle,
input:active + #mainTitle {
   border: 2px solid #ccc;
}