idiatulla
Newbie | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Доброго времени суто ALL Есть желание на сайте использовать такой эффект - когда пользователь открывает меню сайта - хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню. Cначала я отслеживаю событие возникновения меню и через jQuery присваиваю тегу body стиль blur: jQuery('body').addClass('blur'); когда меню схлопывается и hover исчерает - я и класс удаляю: 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; } Даже попробовал вот так: body.blur #navigation *{ -webkit-filter: blur(0px) !important; -moz-filter: blur(0px) !important; filter: blur(0px) !important; } К сожалению, и это не сработало Что интересно, если делать body.blur #navigation *{ -webkit-filter: blur(10px) !important; -moz-filter: blur(10px) !important; filter: blur(10px) !important; } то срабатывает... Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен. |