焦點更改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; 
}