Вопрос про наследование фильтров в CSS
-
Есть желание на сайте использовать такой эффект — когда пользователь открывает меню сайта — хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню.
Cначала я отслеживаю событие возникновения меню и через jQuery присваиваю тегу body стиль blur:
jQuery('body').addClass('blur');
когда меню исчезает — я и класс удаляю:
jQuery('body').removeClass('blur');
а вот сам класс:
body.blur { -webkit-filter: blur(1px); -moz-filter: blur(1px); filter: blur(1px); }
Тут всё прекрасно, всё работает, но есть одно но. Так как менюха является дочерним элементом для body — то и меню, собственно, тоже размывается.
Я даже довесил событие возникновения менюхи применением стиля для меню:
body.blur #navigation { -webkit-filter: none; -moz-filter: none; filter: none; }
К сожалению, и это не сработало 🙁
Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен.
- Тема «Вопрос про наследование фильтров в CSS» закрыта для новых ответов.