Применить css ко всем элементам, кроме одного, с помощью Jquery - PullRequest
Новая
       7

Применить css ко всем элементам, кроме одного, с помощью Jquery

0 голосов
/ 03 мая 2018

Я хочу, чтобы фон моей мобильной навигации был непрозрачным 0,5

.

Я использую это: 

$('body:not(#navigation-mobile)').css({opacity: '0.5'});

Однако все тело превращается в непрозрачность, когда я хочу всего, кроме #navigation-mobile до.

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Невозможно дать вам конкретное решение без образца вашего HTML, но комментарии верны, что применение непрозрачности к body повлияет на все, что внутри него.

Предполагается, что ваша структура похожа на следующую: 

<body>
  <header></header>
  <nav id="navigation-mobile"></nav>
  <main></main>
  <footer></footer>
</body>

Вы можете сделать что-то вроде: 

$('body > *:not(#navigation-mobile)').css({'opacity': 0.5 })

Вам нужно будет настроить селектор в зависимости от вашей разметки, но общая идея заключается в том, что вы используете селектор :not(), чтобы применить непрозрачность к братьям и сестрам вашей мобильной навигации, которая затем применит непрозрачность к их дочерним элементам. Например, если у вас есть контейнер, обертывающий весь ваш контент, вы можете заменить body в селекторе на класс / идентификатор контейнера.

Если вы редактируете свой вопрос с соответствующим HTML, я могу отредактировать свой ответ, чтобы быть более конкретным.

0 голосов
/ 03 мая 2018

Нет способа убрать непрозрачность для дочернего элемента [1]

Так что, если вы вместо этого сделаете остальную часть страницы, кроме навигационной панели, одним элементом.

Как это: 

<body>
  <div id="navigation-mobile">
    <ul class="inline-list">
      <li><a href="#">link1</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
    </ul>
  </div>
  <div id="body">
    <div id="header">blabla</div>
    <div id="content">blabla</div>
    <div id="footer">blabla</div>
  </div>
</body>

Таким образом, вы можете использовать только этот код jquery: 

$('#body').css({opacity: '0.5'});

И навигационная панель останется полностью непрозрачной.

0 голосов
/ 03 мая 2018

Непрозрачность влияет на все дочерние элементы применяемого элемента. Чтобы обойти это, установите свой фон в качестве собственного элемента без дочерних элементов и примените непрозрачность только к фону. Скорее всего, вам придется использовать что-то подобное в фоновом контейнере: 

 position: fixed; top:0; left:0; z-index:1; width:100vw; height:100vh;

Контейнер с контентом будет затем располагаться сверху, также давая ему: 

 position: fixed; top:0; left:0; z-index:10;

Затем вы можете применить прозрачность к своему фону, не влияя на контент. Не наносите фон на тело. Создайте отдельный div и примените его к этому div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...