更改焦点上的 CSS 属性答案

【问题标题】：Changing CSS properties on focus更改焦点上的 CSS 属性
【发布时间】：2010-11-13 16:34:48
【问题描述】：

有没有办法在输入字段获得焦点时更改 div 的 CSS 边框（例如，当它失去焦点时，移除边框）。

HTML：

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

CSS：

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

【问题讨论】：

标签： jquery html css focus border

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您的用户使用的是能胜任的浏览器（因此，大部分情况下不是 IE），您可以只使用 css：

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

【讨论】：

我的大多数用户都使用 IE，哈哈，:)) 我希望 IE 可以工作 :((