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

Question

我在一个网站上工作，在该网站上我使用 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 1 个区块

    <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>

现在我想添加另一种效果，它应该模糊所有其他块。所以 bassicaly 如果我将鼠标悬停在一个块上，我希望该块弹出并具有 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>

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

CSS Effects, Hover over a div Container and all the other div Containers lower the opacity

html

javascript

css

effects

hover