如何仅突出显示嵌套表的最内层表行？

我有几个嵌套表，我想突出显示鼠标指针下方最里面的行。 我怎样才能做到这一点？

一些指针：我使用嵌套表来显示递归表格数据。 这些表可以嵌套10层深。 嵌套就像您期望的那样：

 
 上突出显示。 
 我可以使用CSS或jQuery。 







 
	
Answer 1
		      	
 我想提出一些稍微优雅（至少更短）的东西： 
 使用委派的鼠标事件： 
 $('#mainTable').on('mouseenter mouseleave', 'tr', {el: false}, function (e) { var hl = e.data.el; hl && hl.removeClass('hover'); e.data.el = (e.type === 'mouseenter') ? $(this).addClass('hover') : $(this).parent().closest('tr:hover').addClass('hover'); }); 
 它将当前突出显示的节点存储在（持久）委托数据对象中并处理鼠标事件，如下所示： 

 如果鼠标进入元素（最里面的hovertr ），则删除当前突出显示并突出显示当前元素。 
 如果鼠标离开元素，则突出显示最近的hovered祖先tr而不是当前的祖先tr 。 

 使用事件委托（例如$.delegate()和$.on()与选择器）的解决方案的主要优点是仅附加单个事件侦听器 （与使用传统的每元素方法可能数十个，数百个或更多相比） ）并能够支持元素的动态更改 。 
 我选择此解决方案而不是使用mouseover事件，因为我认为进入/离开事件应提供更好的性能，因为它们不会冒泡。 
  JSFiddle 。 
  注意 ： 
 它有jQuery 1.9.x的问题，但就其他方面而言，就我测试而言，包括更新版本和旧版本。 这是由于该版本中的:hover伪选择器出现问题。 

  CSS4 
  CSS level-4有一个建议的function ，只能使用CSS启用此行为： 
 tr, !tr:hover tr:hover { background-color: transparent; } tr:hover { background-color: #DDFF75; } 
 当然，由于此function目前不是最终版本，目前任何主要浏览器都不支持，因此本节将作为未来参考。 


Answer 2
		      	
 使用javascript鼠标事件，事件目标应该是最深的元素： 
 $('tr').mouseover(function(e){ $(e.target).parents('tr').removeClass('hover').first().addClass('hover'); }); 
 这是为了清除鼠标离开桌子时： 
 $('#main-table').mouseout(function(e){ $(this).find('tr').removeClass('hover'); }); 
  http://jsfiddle.net/tN865/1/ 


Answer 3
		      	
 这并不像听起来那么简单，因为CSS中没有“带有某些属性的子元素”的元素; 选择器始终只匹配链中的最后一个元素。 但是通过一点点jQuery魔术，你可以使它工作。 首先是风格： 
 .hover { background: #eaf0ff; } 
 每当添加新表时调用此函数： 
 var installInnerMostHover = function(){ var updateHover = function() { $('.hover').removeClass('hover'); $('.hover-hint').each(function(index,e) { if($(e).find('.hover-hint').length === 0) { $(e).addClass('hover'); } }); }; $("tr").off("mouseenter mouseleave"); $("tr").hover( function(){ $(this).addClass('hover-hint'); updateHover(); }, function(){ $(this).removeClass('hover-hint'); updateHover(); } ); }; 
 这个小gem会将hover-hint添加到光标下方的所有行。 之后，它将查找具有类hover-hint任何元素，然后将类hover添加到没有任何具有hover-hint子元素的所有元素。 将只有一个这样的元素：最里面的行。 
 但是当你尝试这个时，当你在嵌套表的行之间的空间中移动鼠标时，你会得到一个丑陋的闪烁，因为就CSS而言，这个间隙（单元格间距）不是行的一部分，所以父行将被触发。 要防止这种情况，您需要删除单元格间距： 
 table { border-spacing:0; border-collapse:collapse; }