Question

我正在尝试设置CSS样式，以便在表悬停时突出显示嵌套表中的表格单元格。

请参阅下面的示例代码.....

<html>
    <head>
        <style type='text/css'>
        table
        {
            border: solid 1px black;
        }

        table.Content:hover td.ContentIndent
        {
            background-color: #AAAAAA;
        }
        </style>
    </head>
    <body>
        <table class="Content">
            <tr>
                <td class="ContentIndent">Root Indent, could be highlighted when this table is moused over</td>
                <td>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 1 - Should be highlighted only when this table is moused over</td>
                            <td>Content 1 - Indent 1 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 2 - Should be highlighted only when this table is moused over</td>
                            <td>Content 2 - Indent 2 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                </td>
            <tr>
        </table>
    </body>
</html>

基本上当其中一个子表被鼠标悬停时，我希望它的缩进单元格被突出显示。如果父单元格的缩进单元格会突出显示，那也很酷。

不幸的是，现在它的设置方式，来自两个子单元格的缩进单元格都会突出显示，无论哪个表格被鼠标悬停。我在Firefox 3.5和IE 8中尝试过这个并得到相同的结果。

我确实找到了这个tutorial和关联的demo基本上我正在尝试做的事情，除了它使用嵌套列表而不是表格。但是，当我尝试使用＆gt;运算符（使样式table.Content:hover > td.ContentIndent）它根本不起作用。我不确定区别是什么。

Answer 1

问题是您正在为周围的表使用“Content”类，因此只要光标进入父级，就会触发整个表的悬停事件。为父表提供一个不同的类（例如“Parent”），它将正常工作。

像

这样的选择器

.Content td

通常适用于下面的每个td。内容，无论嵌套多深。＆gt;指定该规则仅对元素的直接子项有效，而不适用于更深层次的嵌套项。 7之前的IE无法识别＆gt;。

Answer 2

嗯，首先，如果你想支持IE6，你将需要一些描述的Javascript，因为该浏览器仅支持锚点上的:hover伪元素（链接即<a>标签）。

另一个问题是您将需要子CSS选择器来执行此操作，这在IE6中也不再受支持。

所以非IE6兼容版本是：

table.Content:hover > tbody > tr > td.ContentIndent { background: #AAA; }

请注意隐式创建的<tbody>元素。

没有子（＆gt;）选择器这个表达式：

table.Content td.ContentIndent { ... }

将获取每个缩进单元格，因为它被称为后代选择器，顶级内容表是所有缩进单元格的父级。

你可以通过这种方式解决这个问题：

table.Content:hover td.ContentIndent { background: #AAA; }
table.Content:hover table.Content td.ContentIndent: background: #FFF; }

第二个基本上通过将更深的缩进恢复到正常格式应该是什么来基本上取消该问题。处理一些可以通过子选择器解决的IE6问题是一种相当标准的技术，但以这种方式恢复样式并不总是可行或切实可行。

为了支持IE6，我建议使用Javascript库。我首选的选项是jQuery，它将涉及这样的代码：

$(function() {
  $("table.Content").hover(function() {
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").addClass("hover");
  }, function() [
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").removeClass("hover");
  });
});

使用：

td.hover { background: #AAA; }

CSS Hover父子项

2 个答案: