CSS и верстка → Конфликт :hover и background:none в Opera
При верстке очередного проекта впервые столкнулся со странным багом, появляющимся только в Opera9 и выше. После серии экспериментов он был успешно решен. Итак, что это за баг:
Баг появляется при соблюдении 3-ех условий: 1. эффект :hover для какого либо элемента; 2. свойство background:none у этого же элемента; 3. под этим элементом есть какая-либо информация (текст, изображение). Пример можно посмотреть здесь. При наведении на Пункт 3 открывается выпадающее меню, при наведении на текстовую ссылку одного из ее пунктов все работает, но как только мы уводим курсор с ссылки, то пункт сразу же перестает быть активным, хотя для него у нас прописан display:block, что значит, что он должен быть активным на всей занимаемой площади. Так же обратите внимание, что у первого подпункта и половине второго все нормально, но как только под подпунктом появляется изображение наше меню работает не так, как хотелось бы.
Причина в использовании свойства background:none. Почему так происходит я незнаю, но как-нибудь на досуге посижу над этим.
Решил проблему использованием однопиксельного гифа, как бэкграунд, вместо background:none. Если же нужно обнулить background заданный картинкой, то при использовании свойства background-image:none; такой проблемы не возникает. Рабочий вариант можно посмотреть здесь
