CSS模糊整个部分，不模糊div内部
CSS模糊整个部分，不模糊div内部
提问于 2020-01-23 07:32:19
快速问答。我试图在单击时模糊整个部分，但我希望该部分中的div不会被它模糊。
我试着用JS修改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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-23 07:43:33
渲染的工作方式是，如果不模糊子对象，就不能模糊父对象。渲染是以树的形式完成的，整个过程都有缓存。
您可以做的是模糊除一个子项之外的所有子项：
#items:hover * {
filter: blur(3px);
}
#items:hover *:hover {
filter: none;
}<div id="items">
<div>Hey</div>
<div>Hallo</div>
<div>Gutentag</div>
</div>
Stack Overflow用户
发布于 2020-01-23 08:59:09
这是一个在JavaScript中的例子，它将模糊除了被点击的图像之外的所有东西。如果您在<section>中单击图像以外的其他内容，它将全部回到焦点中。
const sectionClick = (e) => {
const clickedOn = e.target;
const textWrapper = document.querySelector('.textWrapper');
const cardWrapper = document.querySelector('.cardWrapper');
const allCards = cardWrapper.children;
if (clickedOn.parentElement === cardWrapper) {
textWrapper.style.filter = 'blur(10px)';
for (const element of allCards) {
clickedOn === element ? element.style.filter = 'none' : element.style.filter = 'blur(10px)'
}
} else {
textWrapper.style.filter = 'none';
for (const element of allCards) {
element.style.filter = 'none';
}
}
};.section {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}<section class="section" onclick="sectionClick(event)">
<div class="textWrapper">
<p> Amet do nulla dolore sit mollit cillum officia eu officia est aliqua eu. Aliqua dolore laborum reprehenderit fugiat aute sunt pariatur cillum qui tempor quis proident elit.</p>
</div>
<div class="cardWrapper">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
<img src="https://dummyimage.com/100x100.png" alt="image placeholder" class="card">
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59869690
复制相关文章
相似问题
腾讯云开发者
