пятница, 02 января 2015
06:47

все записи пользователя в сообществе Ренос
Тесты, просто тесты.
Здравствуйте.

Я к пунктам меню (Мой дневник, Новая запись и т.д.) прикрутил конструкцию для показа небольшой анимации при наведении на них курсором. Для этого использовал :hover::after. Всё идеально работает почти со всеми пунктами. Кроме "Мой дневник", "Платные сервисы" и "FAQ". У них почему-то появляется сразу 2 псевдоэлемента с анимацией: первый в нужном месте, а второй чёрте-где.

Кто-нибудь в курсе из-за чего это может происходить?

@темы: меню, diaryCSS, Дизайн

URL
Комментарии
02.01.2015 в 13:32

Helga Rigjarl
У них почему-то появляется сразу 2 псевдоэлемента с анимацией: первый в нужном месте, а второй чёрте-где.
no-repeat в background везде есть?
Вы бы или код выложили или тестовый дневник открыли.
URL
02.01.2015 в 14:38

Ренос
Тесты, просто тесты.
no-repeat в background везде есть?
Не в том дело. Там лишний элемент создаётся. Его не видно, но он есть - полоса прокрутки появляется. Из-за этого фон "прыгает" при наведении на 3 этих пункта (он у меня растянутый на всю ширину и закреплённый).

Вы бы или код выложили или тестовый дневник открыли.
Ой :) Открыл.
На вырвиглазную расцветку не обращайте внимания, это лишь для контраста, чтобы мне виднее было, что меняется.
URL
02.01.2015 в 15:35

Helga Rigjarl
Сделайте немножечко иначе. Например так:


То есть, пропишите фон для li a:hover:... И вместо глобального left воспользуйтесь margin: 0 0 0 20px; для элементов блока. А величину отступа от левого края "родителя" 20px вам придётся подбирать с учётом наличия счётчиков и самой длинной ссылки на "Библиотеку изображений".
URL
02.01.2015 в 16:26

Ренос
Тесты, просто тесты.
Спасибо :)
А где про это прочитать можно? Хотя бы в какую сторону рыть? Всё же интересно из-за чего так получилось.
URL
02.01.2015 в 19:39

Helga Rigjarl
Как вам сказать ) Это опыт и интуиция ) Сначала попробовала для родительского элемента ваш эффект, то есть для .menuSection :hover::after , и проявилось удваивание картинки. Значит нужно для дочернего по отношению к li , то есть к непосредственно к элементам списка, коими являются сами ссылки. Если вы обратили внимание, для счётчиков, которые тоже являются ссылками, эффект также срабатывает.
Вот тут info.diary.ru/index.php?title=CSS основные родительские элементы и их дочерние. Дополнительно для Дневничков здесь diarycss.narod.ru/selectors/ . А здесь общая теория иерархии htmlbook.ru/samcss/dochernie-selektory . И в веб-разработчике Firefox, или в каком вы браузере работаете, можно отслеживать иерархию элементов, например, через инспектор элементов. В FF, щёлкнув правой кнопочкой мышки по любому элементу, обнаружите команду "исследовать элемент". Она вам все тайны откроет )
URL
02.01.2015 в 20:31

Ренос
Тесты, просто тесты.
Эм... Ну... Я не такой уж и новичок в этом деле, просто с CSS работал крайне мало и только мелочёвку всякую делал.
Просто странным показалось, что в, казалось бы, одинаковых условиях (в чём разница между элементами, которые отрабатывали нормально, и 3-мя "белыми воронами" я так и не понял) всё работает по-разному. Я раньше по наивности думал, что :after создаёт лишь 1 дополнительный элемент. А тут такая странность с откуда-то взявшимся дублем, который, к тому же, чёрте-где появляется... Ладно, спишу это на магию CSS :)

Ещё раз спасибо за помощь :)
URL