html – 更改内部元素聚焦时的颜色

概述我想在用户选择里面的文本框时更改tr元素的颜色.焦点伪类没有使用它.没有 JavaScript可以实现吗？ HTML： <table><tr> <td>Name</td><td><input type="text" name="name"></td></tr></table>​ CSS： tr:focus{ background:yellow;}​ UPDATE1： 看起 我想在用户选择里面的文本框时更改tr元素的颜色.焦点伪类没有使用它.没有 JavaScript可以实现吗？

HTML：

<table><tr>    <td>name</td><td><input type="text" name="name"></td></tr></table>​

CSS：

tr:focus{    background:yellow;}​

UPDATE1：
看起来没有CSS only方法.使用JavaScript最简单的方法是什么？

解决方法 不.在CSS3中没有主题选择器,但在 CSS4中会有一个.

编辑：

纯JavaScript解决方案可以

var i;var inputs = document.querySelectorAll("tr > td > input");for(i = 0; i < inputs.length; ++i){    inputs[i].addEventListener('focus',function(e){        this.parentNode.parentNode.classname += ' highlight';            });    inputs[i].addEventListener('blur',function(e){        this.parentNode.parentNode.classname = this.parentNode.parentNode.classname.replace(/\s*highlight\s*/ig,' ');    });}

但是,这在IE≤7中不起作用,因为之前的8节不知道document.querySelectorAll(demonstration).如果您想要一个免费的跨浏览器解决方案,您可以使用jQuery和以下代码(demonstration)：

$("tr > td > input").focus(function(e){    $(this).parent().parent().addClass('highlight');}).blur(function(e){    $(this).parent().parent().removeClass('highlight');});

不要忘记在CSS中添加类tr.highlight.请记住,jquery将在以后的版本中放弃对旧浏览器的支持(参见Browser Support),因此你必须使用jquery 1.x forIE≤8.

总结

以上是内存溢出为你收集整理的html – 更改内部元素聚焦时的颜色全部内容，希望文章能够帮你解决html – 更改内部元素聚焦时的颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。