焦点更改CSS属性

Question

当输入字段获得焦点时（例如焦点丢失，删除边框），有没有办法改变div的CSS边框？

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

你可以只使用CSS，如果您的用户在一个称职的浏览器中工作（所以，不是IE，在大多数情况下）：

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