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

Question

我正在处理一个网站，其中我创建了5个不同的块，每个块都有一个

容器。现在我添加了CSS效果，当你悬停在它上面时，这个

容器会弹出来。

.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代码

    <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实现？如果可以，怎么做？

期待您的答案！

- NoobOnStack

---

你能提供所有那些div的HTML吗？ - Vepth

添加了HTML代码以显示1个块，它们都是相同的。 - NoobOnStack

所有的5个块都有相同的类吗？ - Vepth

是的，它们都是相同的。 - NoobOnStack

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>

- ROOT

---

做得很好。我曾经苦恼于将其他元素设置为较低的不透明度。 - Vepth

@NoobOnStack。我更新了我的答案，并在HTML中包含了脚本标签。 - ROOT

你能创建一个 jsfiddle 吗？在那里进行工作会更好：https://jsfiddle.net/ 只需在那里再现问题，我会尽力帮助 :) 那样更容易发现问题。 - ROOT

@ROOT 如果你将鼠标悬停在 div 的任一子元素上，则整个 div 的不透明度也会变为 0.2。 - Vepth

哇，你真是个猛兽！非常感谢你。 - NoobOnStack