CSS悬停ParentChild项目 [英] CSS Hover ParentChild Items
问题描述
请参阅下面的示例代码...我试图设置一个CSS样式，以在表格悬停时突出显示嵌套表格中的表格单元格。 ..
< html>
< head>
< style type ='text / css'>
表
{
border：solid 1px black;
}
table.Content：hover td.ContentIndent
{
background-color：#AAAAAA;
}
< / style>
< / head>
< body>
< table class =Content>
< tr>
< td class =ContentIndent>根缩进，可以在此表被隐藏在< / td>时突出显示。
< td>
< table class =Content>
< tr>
< td class =ContentIndent>缩进1 - 只有当此表被隐藏时才应高亮显示< / td>
< td>内容1 - 当此表被隐藏在< / td>时，应突出显示缩进1。
< / tr>
< / table>
< table class =Content>
< tr>
< td class =ContentIndent>缩进2 - 只有当此表被模糊时才应高亮显示< / td>
< td>内容2 - 当此表被隐藏在< / td>上时，缩进2应该被突出显示。
< / tr>
< / table>
< / td>
< tr>
< / table>
< / body>
< / html>
基本上，当其中一个子表被关闭时，我希望缩进单元格被突出显示。如果父单元格的缩进单元格会突出显示，它也会很酷。
不幸的是，现在设置的方式是，两个子单元格的缩进单元格突出显示，无论哪个表被蒙上阴影。我已经在Firefox 3.5和IE 8中试过了，并且获得了相同的结果。
我确实发现了这个 tutorial 和相关的 demo ，它基本上做了我想要做的事情，除了它使用嵌套列表而不是表格。但是，当我尝试使用>运算符（使样式 table.Content：hover> td.ContentIndent ）时，它根本不起作用。我不确定有什么区别。
好吧，首先，如果你想支持IE6，你会去需要一些描述的Javascript，因为该浏览器只支持锚点上的：hover 伪元素（链接即< a> 标签）。
另一个问题是您需要使用子CSS选择器来执行此操作，这在IE6中不再受支持。
所以一个非IE6兼容版本是：
$ p $ table.Content：hover> tbody> tr> td.ContentIndent {background：#AAA; }
请注意< tbody> 元素这是隐式创建的。
没有child（>）选择器这个表达式：
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; }
I'm trying to setup a CSS style to highlight a table cell in a nested table when the table is hovered over.
See sample code below.....
<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>
Basically when one of the child tables is moused over, I would like it's indentation cell to be highlighted. It would also be cool if the indentation cells of the parent cells would be highlighted.
Unfortunately, the way it's setup now, the indentation cells from both of the child cells get highlighted, regardless of which table is moused over. I've tried this in Firefox 3.5 and IE 8 and get the same results.
I did find this tutorial and associated demo that does basically what I'm trying to do, except it used nested lists instead of tables. But, when I try to use the > operator (to make the style table.Content:hover > td.ContentIndent) it doesn't work at all. I'm not sure what the difference is.
Well, firstly, if you want to support IE6 you're going to need Javascript of some description because that browser only supports the :hover pseudo-element on anchors (links ie <a> tags).
The other problem is you will need the child CSS selector to do this, which again isn't supported in IE6.
So a non-IE6 compatible version is:
table.Content:hover > tbody > tr > td.ContentIndent { background: #AAA; }
Note the <tbody> element that is implicitly created.
Without the child (>) selector this expression:
table.Content td.ContentIndent { ... }
will grab every indent cell because that is known as a descendant selector and the top-level content table is parent to all of them.
You could work around that problem this way:
table.Content:hover td.ContentIndent { background: #AAA; }
table.Content:hover table.Content td.ContentIndent: background: #FFF; }
The second one basically cancels out that problem by reverting the deeper indents to whatever the normal formatting should be. It's a fairly standard technique to dealing with some IE6 issues that could be solved with a child selector but it's not always possible or practical to revert styles this way.
To support IE6 I would recommend a Javascript library. My preferred option is jQuery, which would involve code like this:
$(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");
});
});
with:
td.hover { background: #AAA; }
这篇关于CSS悬停ParentChild项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
