使用列的列表的简单方法

Question

我一直在使用表格来显示网络邮件收件箱中的项目列表。这里的问题是:hover上的tr在IE中不起作用（无论如何都是愚蠢的，因此问题）。该列表有多列，很像GMail的格式。我想要做的是能够在悬停等方面设置每一行的背景。有人可以给我一个很好的解决方案表（比如一个包含多列的列表），这样我就可以得到以下行为：

理想情况下，我不想使用像JQGrid这样的东西;我想使用纯HTML和尽可能干净的标记来做到这一点。 CSS显然很好。

Answer 1

它的工作原理不是吗？

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

Answer 2

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