Сделать hover неработающим на прозрачных элементах

bybus

Захожу иногда
86
2 / 1

Сделать hover неработающим на прозрачных элементах

« : 04.12.2014, 20:20:23 »

В общем у меня есть вертикальное меню. Пока что у меня нет анимации и при hover на пункте меню свойство подменю меняется с display:none на display:block;
Хочу добавить анимацию появления подменю: при наведении на пункт меню появляется подменю и подъезжает справа к меню.
Проблема в том, что свойство которым я делаю подменю скрытвм(display:none) не анимируется. Если же это свойство убрать, то подменю(скрытые по visibility и opacity) все равно реагируют на наведение мыши. В результате получается такая ерунда: Подвожу мышь к меню, но не доехав до него пару сантиметров появляется подменю(т.к. именно оно находится с opacity:0 под указателем), но это еще пол беды - если я хочу выбрать другой пункт подменю(например сейчас выбран первый, а я хочу - второй), то вместо этого происходит выбор другого подменю(это я вообще понять не могу), ниже данного.

использую модуль maximenu ck. Встроенные анимации отключил, потому, как они срабатывают через раз. Меню без анимаций выглядит вот так zainskavto.ru - синее вертикальное меню слева.

Записан

Shustry

Moderator
6434
745 / 3

Re: Сделать hover неработающим на прозрачных элементах

« Ответ #1 : 04.12.2014, 23:46:20 »

Анимируйте ширину или позицию, если средствами CSS3 хотите.

Записан

bybus

Захожу иногда
86
2 / 1

Re: Сделать hover неработающим на прозрачных элементах

« Ответ #2 : 05.12.2014, 13:05:40 »

я не про это...
короче вот сделал тестовую страничку:
http://zhantrufan.esy.es/

синее меню слева, поводите по нему мышкой:
1. подменю открываются при подводе мышки слева, при "прохождении" по невидимым подменю.
2. Подменю открывается самопроизвольно.

Т.е. если выйти заграницу подменю, то откроется следующее, а должно просто закрыться то подменю с которого съехал указатель.
Как этого избежать?

Короче решил через это
submenu {transform: scale(0, 0);}
submenu:hover {transform: none;}

ибо как сделать родительский элемент анимируемым и недоступным вместе с потомками сразу я хз.

« Последнее редактирование: 05.12.2014, 13:59:34 от bybus »

Записан

Shustry

Moderator
6434
745 / 3

Re: Сделать hover неработающим на прозрачных элементах

« Ответ #3 : 05.12.2014, 14:01:04 »

Цитата: bybus от 05.12.2014, 13:05:40

ибо как сделать родительский элемент анимируемым и недоступным вместе с потомками сразу я хз.

Чтоб не наследовалось, нужно явно селекторы указывать. Например так:

Код: css

.menu > ul > li {} /*только для пунктов первого уровня*/
.menu > ul > li > ul > li {} /*только для пунктов второго уровня*/
.menu  li li {} /*для пунктов от второго и ниже*/

Или же обнуляйте стили:

Код: css

div {transform: scale(0, 0);}
div div {transform: none;}

Записан

Как сделать? Автор Twins	Ответов: 3 Просмотров: 2449	01.07.2021, 13:11:51 от xpank
Как сделать кнопку формы аккаунта? Автор Evgen Kulibin	Ответов: 0 Просмотров: 1648	22.04.2021, 22:15:06 от Evgen Kulibin
Как сделать плавающий модуль? Автор THeCMeX	Ответов: 2 Просмотров: 1873	08.03.2021, 22:21:01 от Flexderection
[Решено] Как сделать чтобы фотография открылась в отдельном окне? Автор a-two	Ответов: 11 Просмотров: 2838	03.11.2020, 16:57:40 от Nikolay89
Как сделать плавающий блок/модуль. Пример есть! Автор Good_user	Ответов: 8 Просмотров: 13147	04.04.2020, 13:49:11 от jan_dax

Сделать hover неработающим на прозрачных элементах - Вопросы по CSS

Новости Joomla

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

👩‍💻 Вместе мы развиваем Joomla: станьте Joomfluencer!

bybus

Сделать hover неработающим на прозрачных элементах

Shustry

Re: Сделать hover неработающим на прозрачных элементах

bybus

Re: Сделать hover неработающим на прозрачных элементах

Shustry

Re: Сделать hover неработающим на прозрачных элементах

Похожие темы