使用列的簡單方法列

我一直在使用表來顯示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

使用列的簡單方法列

回答

相關問題