| |
|
|
| | Есть задача - зделать меню.
Есть меню (display: box), и в нём 6 "пунктов" (области типа box, 100x150px). Идея в том, чтоб при наведении на разные боксы изображения "подсвечивались".
Определив для каждого меню-бокса псевдоклас :hover, наблюдаю интересную картину - :hover работает только для одного (первого определенного) box-а. И вот вопрос - почему? Firexfox 2 и Opera 9.23 отказываються выполнять :hover для всех, выполняя его только для первого (определенного) элемента.
Вот так выглядит код css-файла:
#menu
{
background: url(_pics/menu.png);
display: box;
height: 150px;
width: 600px;
}
.menu-item
{
width: 100px;
float: left;
height: 150px;
}
#item1:hover { background: url(_pics/item1-over.png); };
#item2:hover { background: url(_pics/item2-over.png); };
#item2:hover { background: url(_pics/item3-over.png); };
...
#item6:hover { background: url(_pics/item6-over.png); };
|
А вот так - код на html-странице:
<div id="menu">
<div class="menu-item" id="item1">home</div>
<div class="menu-item" id="item2">philosophy</div>
<div class="menu-item" id="item3">works</div>
<div class="menu-item" id="item6">people</div>
</div>
|
Интересно, что IE7 отображает каждый :hover. А вот "продвинутые" браузеры нет... | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 11:43)
| | | а почему не сделать через ссылки? как здесь http://ballista.ru/mark/image_and_css | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 11:53)
| | | Я вчера только поздно ночью наткнулся на эту проблему. Сегодня весь день (пока не зделаю) потрачу на перебор возможных вариантов решения. Спасибо, Ваш будет первым :)
Вообще-же главное, это добиться того, чтоб изображения описывались в css-файле а не в коде html-страницы. Где-то читал, что содержание css-файла полностью кешируеться браузером (включая загрузку описаных в нем изображений). Ведь подгружать картинки каждый раз натыкаясь на <img> - не самая лучая идея с точки зрения производительности. | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 11:58)
| | | не знаю. в тонкости кеширования не вдавался. по ссылки что я привел - два последних примера. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 12:03)
| | | Совершенно отличный пример, спасибо.
Но у меня не работает О.о .Я абсолютно растерян, не вижу в чём проблема. Не работает в Опере и Файрфоксе. Как быть - не знаю. Дописывать на javascript не умею.
Зделал всё как описано в том примере с человечком. Для одного :hover работает - для остальных нет.
Я использую для каждого пункта меню разную картинку. Может в этом проблема?
Я создал несколько разных классов, с разными background'ами. Начальные картинки при загрузке страницы видны, но :hover обрабатываеться только у первой определенной :(
Экспериментировал. Создал один класс с :hover'ом и картинкой, и на странице в меню copy-past'ом зделал несколько одинаковых таких "ссылок" (все одного класса). Всё работает: несколько повторяющихся картинок - и у каждой обрабатывающийся :hover . Вывод - в рамках одного контейнера (в моем случае это меню) может обрабатываться :hover только для одного класса. Глупость какая-то. Или я какую-то мелочь упускаю.
Как быть? | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 14:56)
| | | а может приаттачите архивчик со своим творчеством? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 15:02)
| | | Действительно. Почему бы и нет. Вот часть над которой сейчас работаю. | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 15:13)
| | | style.css
строки 71-72. после закрывающей кавычки точка-запятая не ставиться. поэтому идущие далее стили не читаются.
на будующее http://jigsaw.w3.org/css-validator/ | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 15:35)
| | | :-D
Спасибо огромнейшее! Видимо вот так вот и учаться... на своих ошибках. На всё жизнь запомню и буду использовать валидатор.
Еще раз спасибо! | |
| |
|
|
