如何实现 JS，以便当我将图像悬停在图库中时，它会影响除悬停图像之外的所有其他图像？

Question

我正在创建一个图像缩略图库，其中每个缩略图都将链接到另一个页面上的全尺寸图像。到目前为止，当用户将鼠标悬停在图像上时，一个红色框会使用 CSS ::before 伪类覆盖图像。

.overlay {
  position: relative;
  display: inline-block;
}

.overlay>img {
  vertical-align: middle;
}

.overlay::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  transition: 0.2s ease;
  opacity: 0;
}

.overlay:hover::before {
  opacity: 1;
}

<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>

我想更改交互，以便当用户将鼠标悬停在图像上时，除了悬停在图像上的图像之外，图库中的所有其他图像（具有“覆盖”类）都将被红色框覆盖。这将通过用红色覆盖其他图像来将焦点放在悬停的图像上。

似乎 Javascript 将是完成这项工作的最佳方式，我如何用我已经编写的内容实现 js？

我也在尝试 CSS :not pseudo，但无法使其正常工作。

Answer 1

$('.overlay').hover(fnOver, fnOut)
  function fnOver() {
      $('.overlay').not(this).addClass('active')
  }
  function fnOut() {
      $('.overlay').not(this).removeClass('active')
  }

 .overlay {
    position: relative;
    display: inline-block;
}

.overlay>img {
    vertical-align: middle;
}

.overlay::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: red;
    transition: 0.5s ease;
    opacity: 0;
}

.active::before {
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>