Javascript 如何更改“a”的背景色；李",；如果我将光标放在输入字段中的"；李；？

当我将光标放在a、b或c中时，是否可以设置

li的
背景色
？
我有一个包含100条记录的列表，我希望孔行（“li”）以另一种颜色显示，以便更容易使用该列表

<li id=recordsArray_1>
 <form medthod=post name=fr_1 id=fr_1>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_1 value=ok>
 </form>
</li>

<li id=recordsArray_2>
 <form medthod=post name=fr_2 id=fr_2>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_2 value=ok>
 </form>
</li>

<li id=recordsArray_3>
 <form medthod=post name=fr_3 id=fr_3>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_3 value=ok>
 </form>
</li>
 .etc .... > 100







等….>100
纯css无法做到这一点，您需要使用javascript/jQuery：

$("input[type='text']").focus(function(){
    $("li").removeClass("background");
    $(this).closest("li").addClass("background");
});

请参阅：
您可以将一个同级元素添加到输入元素，并使其在悬停时以背景色覆盖li

CSS

input[type=text]:focus~div {
    background-color:red;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
}
li {
    position:relative;
}

即使没有父选择器，也可以通过子项的悬停（悬停气泡）触发li上的悬停状态

一种可能性是使用该状态，如果要避免光标位于li上而不是输入上时的更改，只需禁用悬停事件：

CSS


当我将光标放在“li”的子输入上时，是否可以设置“li”的背景色

不，不幸的是，
：focus
选择器对聚焦元素的祖先不起作用，因此您无法检测到它<代码>：活动的

会，但只会在单击的瞬间闪烁

：hover

选择器（应用于

li

）可以实现这一点，假设您使用鼠标导航，它将具有类似的效果，并且在查看表格时也会有所帮助，而不仅仅是在填写输入时。但是，它不适用于基于键盘的导航

因此，您只能求助于JS（以jQuery为例，使用本机DOM也很容易做到这一点）：

---

不使用CSS-请参阅+1以更好地使用

：focus

伪类：@HashemQolami-yep更新..只需将div

z-index:-1

？@Bergi ok获得它…：）+1对于css解决方案，我可以看到您的JSFIDLE工作得很好，但我无法使我的脚本工作。我的li看起来是这样的：#contentLeft li{text align:left；list style:none；margin:0 0 4px-40px；padding:2px；border:CCCCCC solid 1px；background color:#fffef；color:#000；width:1160px；}来自您的代码：code.jquery.com/jquery-1.10.2.js“>$（“input[type='text']）。focus$（this.parent（）.parent（）.addClass（“background”）；}）；在javascript中，将$（“contentLeft li”）更改为$（“#contentLeft li”）。并确保在css中添加一个背景类，即：。background{background color:red；}。我以“background”类为例，可以将其更改为“active”或“li active”之类（当然是在jQuery代码和CSS中）。谢谢！现在这些行变为红色，但单击后它们都保持红色，这样我就可以有许多红线，而不仅仅像您的示例中那样是活动的。我遗漏了什么吗？确保您在$（“#contentLeft li”）中有正确的选择器。removeClass（“背景”）。在您的示例中，您遗漏了#。确保列表项（“li”元素）位于id为“contentLeft”的元素内。或执行$（“li”）.removeClass（“背景”）以页面上的所有列表项为目标。我将页面分成了几块，它不起作用的原因是我的

中有一个表。

。这是可以修复的还是我必须重建我的网页。我有40个列（包含文本输入复选框输入）在每一行中，使用css放置它们需要很多工作。如果我单击复选框和文本输入框，这个脚本可以工作吗？谢谢！但这只适用于hoover。只要光标在字段中，我需要该行保持红色嗨！我尝试了你的建议，但没有成功work@user3214817：.再试一次，但仍然有效与Leons建议的问题相同。单击后所有线条都会着色

li {
    position:relative;
    z-index: 1;
    pointer-events: none;
}
li:hover {
    background-color: red;

}
input {
    position: relative;
    z-index: 2;
    pointer-events: all;
}

var $lis = $("li");
$lis.find("input:text").focus(function(e) {
    $lis.css("background-color", "none");
    $(this).closest("li").css("background-color", "red");
});