Не могу: навести целую строку таблицы - PullRequest
Новая
       15

Не могу: навести целую строку таблицы

0 голосов
/ 13 марта 2011

Когда я наведу курсор мыши на ячейку таблицы, я хочу выделить всю строку! Но с помощью кода, который у меня есть, я могу выделить только одну ячейку! Это мой стол: 

<table id="myTable" class="tablesorter"> 
    <thead> 
        <tr> 
            <th>Title1</th> 
            <th>Title2</th> 
            <th>Title3</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr> 
            <td>Bach</td> 
            <td>42526</td> 
            <td>Dec 10, 2002 5:14 AM</td> 
        </tr> 
        <tr> 
            <td>Doe</td> 
            <td>243155</td> 
            <td>Jan 18, 2007 9:12 AM</td> 
        </tr> 
        <tr> 
            <td>Conway</td> 
            <td>35263</td>
            <td>Jan 18, 2001 9:12 AM</td> 
        </tr> 
    </tbody> 
</table>

и css 

   /*Table sort*/
table.tablesorter {
    font-family:arial;
    background-color: #e6EEEE;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
}
table.tablesorter thead tr .headerSortDown {
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    /*background-color: #8dbdd8;*/
    background-color: #e6EEEE;
}
table.tablesorter tbody tr :hover {
    background: #8dbdd8;
}

Чего не хватает в моем CSS, чтобы выделить целую строку?

Ответы [ 2 ]

6 голосов
/ 13 марта 2011

Вам просто нужно удалить пробел в вашем селекторе: 

table.tablesorter tbody tr:hover
                       /* ^ space was removed */

Поскольку вы оставили комментарий, говорящий "это не работает":

Смотрите здесь, где это работает: http://jsfiddle.net/thirtydot/Pe6Xe/

В соответствии с вашими изменениями это будет работать: 

table.tablesorter tbody tr:hover td {
    background: #8dbdd8;
}

Проблема заключалась в том, что background-color на ваших td s покрывал измененное background-color на tr при наведении.

См .: http://jsfiddle.net/thirtydot/Pe6Xe/1/

4 голосов
/ 13 марта 2011

Вам нужно убрать пробел между tr и: hover.Например, измените это: 

tr :hover

на: 

tr:hover
...