Запретить наследственность для фильтров в CSS

Статус
В этой теме нельзя размещать новые ответы.

magicrobot

Профессор
Регистрация
22 Сен 2013
Сообщения
177
Реакции
43
Есть желание на сайте использовать такой эффект - когда пользователь открывает меню сайта - хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню.

Cначала я отслеживаю событие возникновения меню и через jQuery присваиваю тегу body стиль blur:
HTML:
jQuery('body').addClass('blur');
когда меню исчезает - я и класс удаляю:
HTML:
jQuery('body').removeClass('blur');
а вот сам класс:
HTML:
body.blur {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
Тут всё прекрасно, всё работает, но есть одно но. Так как менюха является дочерним элементом для body - то и меню, собственно, тоже размывается.

Я даже довесил событие возникновения менюхи применением стиля для меню:
HTML:
body.blur #navigation {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}
К сожалению, и это не сработало :(



Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен.
 
Почему бы при нажатии на меню, после размытия body, не отменить размытие у меню?
 
Почему бы при нажатии на меню, после размытия body, не отменить размытие у меню?
яж писал выше - я так и делаю, отменяю размытие у меню:
HTML:
body.blur #navigation {
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
не срабатывает почему то это :(
 
Ну попробуй тогда при клике по меню - скопировать блок с меню и добавить его после тега body, и что бы нормально стало спозиционируй его абсолютно.
 
Ну попробуй тогда при клике по меню - скопировать блок с меню и добавить его после тега body, и что бы нормально стало спозиционируй его абсолютно.
что то как то вырвиглазно сложно и непонятно. Да, и мне не нужно событие клика. Я говорю о ховере.
 
Я чет подумал что ты про клик имел в виду. Но это сути не меняет. А что если не none а -webkit-filter: blur(0px); для деактивации. И еще !important для верности?
 
Я чет подумал что ты про клик имел в виду. Но это сути не меняет. А что если не none а -webkit-filter: blur(0px); для деактивации. И еще !important для верности?
Попробовал. Не сработало. Причём, если пишу -webkit-filter: blur(10px) - срабатывает, зараза! Похоже это свойство только в одну сторону работает :(
 
коллега, херачте контент в обертку и выносите меню за обертку, как говорится *уяк *уяк и в продакшын! :rockin:

а еще можно попробовать классу меню заимпортить отмену фильтра реврайтом после объявления сразу же ближе к дну документа

а вот собственно и ссылка с рабочим решением Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху