html – 更改内部元素聚焦时的颜色
发布时间:2020-12-14 16:45:06 所属栏目:资源 来源:网络整理
导读:我想在用户选择里面的文本框时更改tr元素的颜色.焦点伪类没有使用它.没有 JavaScript可以实现吗? HTML: tabletr tdName/tdtdinput type="text" name="name"/td/tr/table? CSS: tr:focus{ background:yellow;}? UPDATE1: 看起来没有CSS only方法.使用Java
我想在用户选择里面的文本框时更改tr元素的颜色.焦点伪类没有使用它.没有
JavaScript可以实现吗?
HTML: <table> <tr> <td>Name</td><td><input type="text" name="name"></td> </tr> </table>? CSS: tr:focus { background:yellow; }? UPDATE1: 解决方法
不.在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*highlights*/ig,' '); }); } 但是,这在IE≤7中不起作用,因为之前的8节不知道 $("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. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |