时间戳

首页 > 解决方案 > CSS模糊整个部分，而不模糊内部的div

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

问题描述

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

我尝试使用 JSimportant和.setPropertyJS 更改 div 的属性，但没有运气。

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>

标签： javascripthtml

解决方案

渲染的工作方式，你不能在不模糊孩子的情况下模糊父母。渲染以树的形式完成，并在整个过程中进行缓存。

您可以做的是模糊除一个之外的所有孩子：

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

#items:hover *:hover {
  filter: none;
}
<div id="items">
  <div>Hey</div>
  <div>Hallo</div>
  <div>Gutentag</div>
</div>

推荐阅读