javascript - CSS 模糊整个部分，而不模糊内部的 div

Question

快速提问。我试图在点击时模糊整个部分，但我希望该部分内的 div 不会随之模糊。

我尝试使用 JS 更改 div 的属性，important 和 .setProperty，但没有成功。

const handleClickCard = e => {
    const $currentCard = e.currentTarget;
    const $cardDiv = document.querySelector('.card1');
    const $bg = document.querySelector('.overleven');

    if ($currentCard.dataset.id === '1') {
      $cardDiv.style.display = 'initial';
      $bg.style.filter = 'blur(10px)';
      $cardDiv.style.setProperty('filter', 'none', 'important');
    }
  };

<section class="overleven">
    <div class="overleven--wrapper">
      <p class="overleven--info overleven--info--title">Er zijn veel potentiële dreigingen tijdens hun trektocht naar het zuiden, dus moeten ze altijd alert blijven.</p>
      <p class="overleven--info overleven--info--subtitle">Klik op een vuurkaart om een bedreiging te onthullen.</p>
    </div>
    <div class="cards">
      <img data-id="1" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
      <img data-id="2" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
      <img data-id="3" src="./assets/longread/card.png" alt="een dreigingskaart" class="card">
  </div>
  <div class="card1">
  </div>
  <div class="card2"></div>
  <div class="card3"></div>
</section>

  

Answer 1

根据渲染的工作方式，您无法在不模糊子级的情况下模糊父级。渲染以树的形式完成，并全程缓存。

你能做的就是模糊除一个 child 之外的所有 child :

#items:hover * {
  filter: blur(3px);
}

#items:hover *:hover {
  filter: none;
}

<div id="items">
  <div>Hey</div>
  <div>Hallo</div>
  <div>Gutentag</div>
</div>