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

[magicrobot]

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

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;
}

К сожалению, и это не сработало



Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен.

 

[javx]

Почему бы при нажатии на меню, после размытия body, не отменить размытие у меню?

 

[magicrobot]

Почему бы при нажатии на меню, после размытия body, не отменить размытие у меню?

яж писал выше - я так и делаю, отменяю размытие у меню:

body.blur #navigation {
-webkit-filter: none;
-moz-filter: none;
filter: none;
}

не срабатывает почему то это

 

[javx]

Ну попробуй тогда при клике по меню - скопировать блок с меню и добавить его после тега body, и что бы нормально стало спозиционируй его абсолютно.

 

[magicrobot]

Ну попробуй тогда при клике по меню - скопировать блок с меню и добавить его после тега body, и что бы нормально стало спозиционируй его абсолютно.

что то как то вырвиглазно сложно и непонятно. Да, и мне не нужно событие клика. Я говорю о ховере.

 

[javx]

Я чет подумал что ты про клик имел в виду. Но это сути не меняет. А что если не none а -webkit-filter: blur(0px); для деактивации. И еще !important для верности?

 

[magicrobot]

Я чет подумал что ты про клик имел в виду. Но это сути не меняет. А что если не none а -webkit-filter: blur(0px); для деактивации. И еще !important для верности?

Попробовал. Не сработало. Причём, если пишу -webkit-filter: blur(10px) - срабатывает, зараза! Похоже это свойство только в одну сторону работает

 

[ultra]

коллега, херачте контент в обертку и выносите меню за обертку, как говорится *уяк *уяк и в продакшын!

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

а вот собственно и ссылка с рабочим решением Для просмотра ссылки Войди или Зарегистрируйся