Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> изменение цвета строки и css 
:(
    Опции темы
niki
Дата 26.6.2009, 22:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 16.4.2006

Репутация: нет
Всего: нет



Добрый вечер
я сделала таблицу. В ней существуют строки TR. Я хочу, чтобы когда пользователь наводил курсор на строку, она меняла цвет. Когда курсор убирают, цвет возвращается. Можно сделать такое средствами CSS? Для IE.
Спасибо за любую информацию

PM   Вверх
baldina
Дата 27.6.2009, 01:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Завсегдатай
Сообщений: 3433
Регистрация: 5.12.2007
Где: Москва

Репутация: 1
Всего: 101



надо использовать селектор :hover

Код

<html>
<body>

<style>

tr:hover {
color: #FF0000;
background: #00ff00;
}

</style>

<table border=1>
  <tr><td>line 1</td></tr>
  <tr><td>line 2</td></tr>
  <tr><td>line 3</td></tr>
</table>

</body>
</html>


это прекрасно работает... но только не в IE  smile 
IE поддерживает :hover только в <a href=

выход (как всегда - через одно место) есть, как проделать это в IE можно почитать например тут:
http://www.umade.ru/log/2004/07/css-hover-any-element/
PM MAIL   Вверх
niki
Дата 27.6.2009, 11:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 16.4.2006

Репутация: нет
Всего: нет



baldina, 
 Я прочитала информацию в Линке, который Вы прислали. Большое спасибо.

Это сообщение отредактировал(а) niki - 27.6.2009, 11:08
PM   Вверх
bars80080
Дата 27.6.2009, 14:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(baldina @  27.6.2009,  01:20 Найти цитируемый пост)
IE поддерживает :hover только в <a href=

имеется ввиду ИЕ6, более высокие версии держат ховер и на других элементах
PM MAIL WWW   Вверх
niki
Дата 27.6.2009, 16:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 16.4.2006

Репутация: нет
Всего: нет



bars80080, 
под IE7 тоже не работает.
Под FF функционирует.
PM   Вверх
bars80080
Дата 27.6.2009, 19:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



не могёт такого быть. я пишу в основном в ИЕ7, и там у меня и td:hover и span:hover и чего только hover не использует
PM MAIL WWW   Вверх
niki
Дата 28.6.2009, 19:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 16.4.2006

Репутация: нет
Всего: нет



bars80080, 
Код

<style>

tr:hover {
color: #FF0000;
background: #00ff00;
}

</style>

<table border=1>
  <tr><td>line 1</td></tr>
  <tr><td>line 2</td></tr>
  <tr><td>line 3</td></tr>
</table>

</body>
</html>



не работает под IE7 или Вы знаете, как сделать, чтобы заработала. 
PM   Вверх
bars80080
Дата 28.6.2009, 21:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



tr? а почему не td? мы же наводим мышку на ячейку, а не строчку (в смысле строчка прикрывается ячейкой)

tr вообще мало функциональный элемент, используемый только для опоры, когда надо выделить группу ячеек, но и в этом случае tr td
PM MAIL WWW   Вверх
baldina
Дата 28.6.2009, 21:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Завсегдатай
Сообщений: 3433
Регистрация: 5.12.2007
Где: Москва

Репутация: 1
Всего: 101



niki, добавьте в начале файла 
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

и тогда ie7 попробует вести себя по стандарту, иначе он ведет себя по-своему...
PM MAIL   Вверх
bars80080
Дата 28.6.2009, 21:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



transitional то же тянет

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

PM MAIL WWW   Вверх
baldina
Дата 28.6.2009, 21:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Завсегдатай
Сообщений: 3433
Регистрация: 5.12.2007
Где: Москва

Репутация: 1
Всего: 101



Цитата

tr? а почему не td? мы же наводим мышку на ячейку, а не строчку (в смысле строчка прикрывается ячейкой)


bars80080, потому что так хочется smile 
объяснения в стиле "вам это не надо" не катят, т.к. обычно означают "ну...это мне лишний гимор"
а серьезно - подсветка строки в таблице - довольно распространенный прием, помогающий сконцентрировать внимание пользователя.

Добавлено @ 21:45
Цитата

transitional то же тянет

конечно, ведь он включает strict. но это уже другая тема...

Это сообщение отредактировал(а) baldina - 28.6.2009, 21:45
PM MAIL   Вверх
niki
Дата 28.6.2009, 23:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 16.4.2006

Репутация: нет
Всего: нет



Уважаемыеbaldina и 
bars80080, 

все заработало с этой вставкой. Спасибо Вам.
Мне действительно нужен tr а не td. При наведении мышки на строку она теперь меняет цвет.
 smile 
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0528 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.