Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 66420
10.12.2006, 22:32
0.00 руб.
0 1 1
Компьютеры Программирование
Мир вам, уважаемые эксперты!
В приложении код, помогите, пожалуйста, разобраться.
Хочу, чтобы при наведении на ячейку она меняла цвет, а курсор становился "пальцем".
В опере всё работает как надо. Но проклятый эксплорер отказывается менять цвет. А Лис не меняет ни цвета, ни курсора.
Что не так?
С уважением, Лука.

Приложение:
<html><head><title>Меню</title><STYLE type="text/css"><!--.menu {text-align: center; width: 100%; background-color: #789AEE; cursor: hand;}.menuT:hover {background-color: #94AFF2;}--></STYLE></head><body>


<table CLASS="menu"><tr><td CLASS="menuT">Пункт 1</td><td CLASS="menuT">Пункт 2</td><td CLASS="menuT">Пункт 3</td></tr></table></body></html>

Обсуждение

Неизвестный
11.12.2006, 00:01
общий
это ответ
Здравствуйте, Лука!
Итак, почему работает в Опере: опера - это "смесь", что то среднее между Firefox и IE.
Т.е. она как бы пытается поддерживать стандарты, но при этом поддерживает и всякие навороты IE.
Так вот:
1. cursor: hand; - такого нет в стандартах. Почитайте спецификацию CSS. Вам нужно cursor: pointer;. Вот Firefox и не реагировал на это. Но это Вам не понадобится, почему, читаем второй пункт и выход из ситуации.
2. псевдокласс :hover в IE поддерживается вроде только для < a >. Поэтому он не срабатывает в IE. А в Firefox он не срабатывает, потому что Вы упустили обязательную строку < !DOCTYPE ... >, т.е. не указали спецификацию.
Вроде всё ясно: что, где, почему...
Предлагаю следующий выход из ситуации:
- класс menuT сделать не для ячейки таблицы, а для < a >, но чтобы выделялась вся ячейка написать в стилях: display: block.
- а можно класс оставить для ячейки и указать стили для ссылок внутри ячейки.
(приведу пример для второго варианта)
Также следует учесть, что при щелчке по ссылке он изменит цвет, чтобы не происходило добавим :link, :visited, :active. А также происходит подчеркивание, поэтому text-decoration: none;
Всё!
Удачи!

Приложение:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="ru"><title>Меню</title><meta name="content-type" content="charset=windows-1251"><style type="text/css">.menu{ text-align: center; width: 100%; background-color: #789AEE;}.menuT a, .menuT a:link, .menuT a:active, .menuT a:visited{ width: 100%; /* добавлено из-за глюка в IE */ color: #fff; display: block; text-decoration: none;}.menuT a:hover{ text-decoration: none; background-color: #94AFF2;}</style></head><body style="background-color:#fff">


<table class="menu"><tr><td class="menuT"><a href="#">Пункт 1</a></td><td class="menuT"><a href="#">Пункт 2</a></td><td class="menuT"><a href="#">Пункт 3</a></td></tr></table></body></html>
Форма ответа