将鼠标悬停在按钮上->其他元素上的不透明度

Question

我的主页上有一个网格块，上面有6张图像

悬停时，由于CSS（不透明度：0.6），它变得更加透明

我还希望当我将鼠标悬停在图像中心的按钮上时，图像本身保持透明

因为这里不是这种情况

所以我在这里应用了一些代码，但是我不知道为什么它不起作用

.flexItem.grid_sections .button:hover ~ .grid_sections img {
    opacity: 0.6;
}

这些元素显示在我的首页的第5部分 网址：https://www.tresor-ethnique.com/

有什么主意吗？ 让我知道，并提前谢谢您:) 帕斯卡

Answer 1

尝试

div {
  height: 260px;
  width: 260px;
  position: relative;
}

div > img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0.6;
}

div > button {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 30%;
  width: 80px;
  height: 45px;
}

div > button:hover + img {
  opacity: 1;
}

<div>
  <button>Button</button>
  <img src="https://via.placeholder.com/260x260">
</div>

注意：您必须将button标记放在img标记之前