Modification des propriétés CSS au focus

Question

Existe-t-il un moyen de modifier la bordure CSS d'un div, lorsqu'un champ d'entrée obtient le focus (par exemple, lorsqu'il perd le focus, supprimez la bordure).

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

Vous pouvez simplement utiliser css, si vos utilisateurs travaillent dans un navigateur compétent (donc, pas IE, pour la plupart):

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