更改输入焦点上的标签背景颜色答案

【问题标题】：Change Label Background Colour on Input Focus更改输入焦点上的标签背景颜色
【发布时间】：2012-12-17 03:19:17
【问题描述】：

所以，我正在尝试更改表格 td 元素的背景颜色，其中包含输入项的标签。输入项本身位于行中的以下 td 元素中。我试图在输入项的焦点上强制改变背景颜色。到目前为止，以下是我编写的代码。此时它无法正常工作。

$(".input_field").child("input").focus(function() {
    $(this).parent("td").sibling("td").css("background","#cf4f92");
});

<tr>
    <td class="label_name"><label for="email">Email</label></td>
    <td class="input_field"><input type="text" name="email" maxlength="28" /></td>
</tr>

td.label_name {
    background:#dc95ba;
    color:#fff;
    font-size:16px; font-weight:bold; line-height:16px;
    padding:2px;
    text-align:right; text-transform:uppercase;
}
td.label_name label {
    margin:0 10px;
    max-width:150px; width:auto;
}
td.input_field {
    margin:0; padding:0;
}
td.input_field input {
    border:1px solid #dc95ba;
    color:#e1a4c4;
    font-weight:bold;
    margin:0 0 0 -2px; padding:2px 2px 2px 10px;
    width:200px;
}
td.input_field input:focus {
    border:1px solid #cf4f92;
}

【问题讨论】：

标签： jquery html css forms

【解决方案1】：

解决方案在这里。 http://jsfiddle.net/J9bWE/1/

我在 tr 上添加了一个类。

<tr class="EntryRow">
    <td class="label_name"><label for="email">Email</label></td>
    <td class="input_field"><input type="text" name="email" maxlength="28" /></td>
</tr>

别拿我怎么叫tr

$(".input_field input").focus(function() {
    $(this).closest(".EntryRow").find(".label_name").css("background","#cf4f92");
});

【讨论】：

【解决方案2】：

试试这个。有效

$(".input_field > input").focus(function() {
    $(this).closest("tr").children("td:first").css("background","#cf4f92");
});

【讨论】：