Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > наведение

Автор: Arthur1985 21.8.2008, 23:38

Всем привет. Есть строка таблицы и в ней 4 колонки и в каждой колонке своя определенная ссылка. Поискал на форуме и наткнулся на такой пример: Код <table> <tr> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">1</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">2</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">3</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">4</td> </tr> <tr> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">1</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">2</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">3</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">4</td> </tr> <tr> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">1</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">2</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">3</td> <td onmouseover="this.style.background='#ff0000';" onmouseout="this.style.background='#00ff00';">4</td> </tr> </table> Вопрос в другом - если у меня очень много строк в таблице, мне что прописывать для каждой строки такое или можно как-то через CSS это оптимизировать?

Автор: bars80080 22.8.2008, 09:08

через css вряд ли, если тебе не требуется конечно просто менять стиль для ячеек. тогда можно было бы ограничиться классами. вообще, опиши проблему полнее, потому как может тебя устроит такой тэг, как <col /> во-вторых, ты сам используешь js, поэтому почему бы тебе не воспользоваться теми же скриптами для перебора всей таблицы и назначения каждой ячейке своего определённого стиля програмно?

Автор: Arthur1985 22.8.2008, 09:51

bars80080, нашел другое решение. Код body {    behavior:url("csshover.htc");  } что позволяет делать hover на любой объект и ослик при этом не страдает и ведет себя адекватно.

Автор: K1ng 22.8.2008, 11:44

А полагаться на наследование разве надежно?

Автор: SelenIT 25.8.2008, 00:26

Если внутри именно ссылка - имхо, проще, надежнее и аккуратнее сделать ее блочной, растянуть на всю ячейку и прописать hover на нее. В общем же случае, да, hover на td для "приличных" браузеров и костыль в виде HTC для IE6 - наверное, самый приемлемый компромисс... Цитата(K1ng @  22.8.2008,  11:44 ) А полагаться на наследование разве надежно? А почему нет, при условии грамотно прописанной последовательности применения стилей?..

Автор: eee 25.8.2008, 01:05

Код <table class="someStyle"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> Код table.someStyle td{background: #00ff00;} table.someStyle td:hover{background: #ff0000;} а так не легче?)

Автор: SelenIT 25.8.2008, 01:27

Конечно же легче (и концептуально вернее к тому же)... если забить на IE6, без костылей понимающий :hover исключительно для ссылок. Об этом и речь...

Автор: bars80080 25.8.2008, 01:28

eee, зачем повторять SelenIT'а? Цитата(SelenIT @  25.8.2008,  00:26 ) hover на td для "приличных" браузеров и костыль в виде HTC для IE6

Автор: eee 25.8.2008, 15:43

ой) сори, прочто когда читал недопонял) а щас как-то даже не ловко)) SelenIT, звиняюсь))

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)