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;
}
то срабатывает...
Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен. |
