Javascript CSS效果，将鼠标悬停在一个div容器上，所有其他div容器将降低不透明度

我在一个网站上工作，我用一个div容器创建了5个不同的块。现在我添加了一个CSS效果，如果您将鼠标悬停在div容器上，它会使div容器弹出

.site-block {
    position: relative;
    width: 18%;
    height: 345px;
    background-color: #23253b;
    margin: 8px;
    border-radius: 12px;
    top: 0;
    transition: 0.5s;
}
.site-block:hover {
    transform: scale(1.06);
}

用于1块的HTML

    <div class="site-block">
                    <div class="site-logo">
                        <img src="img/sites/csgoempire-logo.png"/>
                    </div>
                    <div class="bonus">
                        <p>Get a free case!</p>
                    </div>
                    <br>
                    <div class="deposit-methods">
                        <img src="img/deposit-methods/btc-deposit.png" alt="G2A" />
                        <img src="img/deposit-methods/eth-deposit.png" alt="CSGO" />
                    </div>
                    <div class="code">
                        <a>Primatcodes</a>
                        <img src="img/copy.png" alt="CSGO" />
                    </div>
                    <div class="site-url">
                        <a href="https://daddyskins.com/promo-code/Primatcodes">Claim
                        </a>
                    </div>
                </div>

得到一个免费的箱子

现在我想添加另一个效果，它会模糊掉所有其他块。因此，基本上，如果我将鼠标悬停在某个块上，我希望该块弹出，不透明度为1，其他4个块的不透明度应降低为0.2。这在CSS或Javascript中是可能的吗？如果是，怎么办

---

期待您的回答

不确定是否有CSS方式，但这里有一种javascript本机方式，使用

mouseenter

和

mouseleave

事件：

.container{
显示器：flex；
}
.地盘{
位置：相对位置；
宽度：18%；
高度：200px；
背景色：#23253b；
利润率：8px；
边界半径：12px；
排名：0；
过渡：0.5s；
颜色：#FFF；
}
.站点块：悬停{
转换：比例（1.06）；
}

AAA

AAA

AAA

AAA

const siteBox=document.querySelectorAll（“.site block”）；
siteBox.forEach（函数（元素）{
元素。addEventListener（'mouseenter'，函数（事件）{
siteBox.forEach（（框）=>{
如果（event.target！==框）{
//box.style.opacity=0.2；
box.style.backgroundColor='rgba（35,37,59,0.2）'；
box.style.color='#000'；
}
});
event.target.opacity=1；
});
元素。addEventListener（'mouseleave'，函数（事件）{
siteBox.forEach（（其他框）=>{
otherBox.style.backgroundColor='rgb（35,37,59）'；
otherBox.style.color='#FFF'；
});
});
});

您能提供所有这些div的HTML吗？添加了1个块的HTML，它们都是相同的。所有5个块都有相同的类？是的，它们都是相同的方式。我正在努力将其他的设置为较低的不透明度。我用HTML中包含的脚本标记更新了我的答案。你能做一把小提琴吗？这样做会更好：只需在那里复制问题，我会尽力帮助：）这样更容易发现问题。@ROOT True，如果您将鼠标悬停在div的一个孩子身上，整个div也将变为0.2不透明度。哇，你的怪兽！非常感谢你