使用列的简单方法列

我一直在使用表来显示webmail收件箱中的项目列表。这里的问题是:hover在tr不能在IE中工作（无论如何这是愚蠢的，因此这个问题）。该列表有多个列，与GMail的格式非常相似。我想要做的就是能够设置悬停时每行的背景等等。有人可以给我一个很好的解决了一个表（比如，多列的列表），这样我可以得到以下行为：使用列的简单方法列

Ignore the buttons along the top - I'm only on about the list behaviour.

理想情况下，我不希望使用类似的jqGrid;我想使用纯HTML和尽可能干净的标记来做到这一点。 CSS显然很好。

来源

2011-04-01 Bojangles

它的作品是不是？

jQuery的

$("tr").mouseenter(function(){ 
    $(this).children("td").css("background-color", "green"); // adds green bg 
}).mouseleave(function(){ 
    $(this).children("td").css("background-color", ""); // removes it. 
});

HTML + CSS /只，我认为它的工作原理无处不在

<style type="text/css"> 
    .table {display: table} 
    .tr {display: table-row} 
    .tr:hover .td {background-color: green} 
    .td {display: table-cell} 
</style> 

<div class="table"> 
    <div class="tr"> 
    <div class="td">aaa</div> 
    <div class="td">bbb</div> 
    <div class="td">ccc</div> 
    </div> 
</div>

编辑：我忘了。在.td之前。检查它在：jsFiddle

来源

2011-04-01 13:10:11

谢谢:-)考虑一下，在这种情况下，它很适合使用表格。我将与你的jQuery解决方案一起去。 CSS可能也适用于'tr> td'。 – Bojangles 2011-04-01 13:14:10

我会建议使用经典的html表（因为这是一个100％纯表格的情况下）。然后使用jQuery（或纯js）轻松地将悬停功能添加到它。

来源

2011-04-01 13:11:40 Damb

使用列的简单方法列

回答

相关问题