CSS效果，将鼠标悬停在div容器上，所有其他div容器会降低不透明度[重复]

Question

此问题已经在这里有了答案：

Change opacity on all elements except hovered one （1个答案）

关闭11小时前。

我正在一个网站上，我用div容器创建了5个不同的块。现在，我添加了一个CSS效果，如果将鼠标悬停在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);
}

HTML for 1 Block

    <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有可能吗？如果可以，如何

期待您的回答！

Answer 1

不确定是否有CSS方式，但这是使用mouseenter和mouseleave事件的JavaScript本机方式：

.container {
display:flex;
}

.site-block {
  position: relative;
  width: 18%;
  height: 200px;
  background-color: #23253b;
  margin: 8px;
  border-radius: 12px;
  top: 0;
  transition: 0.5s;
  color: #FFF;
}


.site-block:hover {
  transform: scale(1.06);
}

<div class="container">
  <div class="site-block">
   <p>AAA</p>
  </div>
  <div class="site-block"><p>AAA</p></div>
  <div class="site-block"><p>AAA</p></div>
  <div class="site-block"><p>AAA</p></div>
</div>
<!-- first try it like this, then move it to file, just make sure  your HTML above js tag ☝️and its before </body> -->
<script>
const siteBox = document.querySelectorAll('.site-block');

siteBox.forEach(function(element){
  element.addEventListener('mouseenter', function(event) {

    siteBox.forEach((box) => {
      if(event.target !== box) {
        //box.style.opacity = 0.2;
        box.style.backgroundColor = 'rgba(35, 37, 59, 0.2)';
        box.style.color = '#000';
      }
    });
    event.target.opacity = 1;
  });
  
  element.addEventListener('mouseleave', function(event) {
    siteBox.forEach((otherBox) => {
      otherBox.style.backgroundColor = 'rgb(35, 37, 59)';
      otherBox.style.color = '#FFF';
    });
  });
});
</script>