Question

当内部的<tr>标记聚焦时，如何影响<a>的样式？

这是表HTML：

<table>
    <tr>
        <td>
            <a href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
</table>

当我点击'Tab'时，实际上选择了链接。我也能像这样影响链接的样式：

a:focus {
    background: #CCC;
}

我无法将<tr>包裹在<a>代码中，因为我在一个表格行上有多个链接。
有没有办法实现这个目标？

Answer 1

CSS不会影响父元素。只支持兄弟元素和子元素。

您需要使用JavaScript。

Answer 2

试试这个SO帖子：changing `tr` style whenever an `input` was focused?

（转载自该页）
使用getElementByID脚本并根据需要定位行：

<html>
<head>
<script type="text/javascript">
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
    <tr id="trId">
        <td>
            <input type="text" onfocus="changeTrStyle()"/>
        </td>
    </tr>
</table>
</body>
</html>

Answer 3

你可以用jquery做，检查这个小提琴

http://jsfiddle.net/Mohinder/pmg45/

CSS

a { display:block; cursor:pointer; }
    .red{ background:red; }

HTML

<table class="table">
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
    <tr>
        <td>
            <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
        </td>
    </tr>
</table>

jquery的

$(document).ready(function(e) {
    $('.link').on('mouseenter', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('mouseleave', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 4

这个小提琴适用于FOCUS ......在FF和Chrome中。 OP请求不适用于mouseenter ...

IE有jQuery焦点问题...有关详细信息，请参阅JQuery focus() is not focusing in IE but it is in Chrome。

FOCUS的FF / Chrome小提琴： http://jsfiddle.net/pmg45/2/

HTML：

<table class="table">
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>
<tr>
    <td>
        <a class="link" href"#" tabindex="1" accesskey="e">edit</a>
    </td>
</tr>

CSS：

a { display:block; cursor:pointer; }
.red{ background:red; }

JQUERY：

$(document).ready(function(e) {
    $('.link').on('focus', function(){
        $(this).parents('tr').addClass('red');  
    });
    $('.link').on('focusout', function(){
        $(this).parents('tr').removeClass('red');   
    });
});

Answer 5

在css中，当子元素受到影响时，不能影响父元素。

您必须使用jquery来影响该父级...

在jquery中，您可以使用悬停功能来更改它的父级

例如：

  $('a').hover(function(){
  $(this).parent().css({"color":"red"});
  });

上面的编码会在悬停时改变链接的直接父级的颜色

在链接上影响表行CSS：焦点

5 个答案: