如何在当前未悬停的所有其他图像上显示图像叠加层？

Question

我的组件中有这个渲染代码（这会渲染一个由li 元素组成的无序列表，每个元素都有自己的图像）：

<div className="thumbnail-photos-wrapper">
  {spot.thumbnail_image_urls ? spot.thumbnail_image_urls.map(url => 
    <div className="thumbnail-image-wrapper">
      <img src={url} alt="Thumbnail photo" />
    </div>) : ''}
</div>

当我将鼠标悬停在其中一张图片上时，我希望其他图片显示为灰色。我找到了关于使整个背景变灰/变黑的解决方案，但这并不是我所需要的；我只希望没有悬停的图像变灰。

我还了解到，在 JS/React 应用程序中使用状态与 HTML 元素进行交互会更好，但是，我认为这行不通。如果我在上面的渲染代码中有依赖于切换状态的动态 HTML 类，它将在重新渲染时切换所有类名（如果状态为真或假，则有效地更改图像包装器的所有类名；我只想要更改非悬停图像的外观！）。

我也想过做这样的事情：

<div className="thumbnail-photos-wrapper">
  {spot.thumbnail_image_urls ? spot.thumbnail_image_urls.map(url => 
    <div className="thumbnail-image-wrapper">
      <div className="overlay-wrapper"></div>
      <img src={url} alt="Thumbnail photo" />
    </div>) : ''}
</div>

我有一个单独的 div 来保存叠加层。我在想我可以让这个overlay-wrapper 最初有一个display: none（或其他类似的东西），然后当用户将鼠标悬停在图像上时，它就会变得可见。但是，我相信这也会在悬停的图像上叠加，这不是我想要的。

感谢您的帮助！

Answer 1

更新

我添加了一个带有短过渡的 CSS filter，作为直接叠加的想法，而不是更改 opacity。

---

冒着过于简单化的风险，您可以使用 CSS 否定来处理此任务。

来自MDN：

:not() CSS 伪类表示不匹配的元素 选择器列表。因为它可以防止特定项目 被选中，它被称为否定伪类。

.thumbnail-photos-wrapper:hover .thumbnail-image-wrapper:not(:hover) {
  filter: brightness(.33);
}

.thumbnail-image-wrapper {
  transition: filter 0.3s ease-in-out;
}

/* For styling puroses only — ignore */
.thumbnail-photos-wrapper { display: inline-block; }

<div class="thumbnail-photos-wrapper">
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
  <div class="thumbnail-image-wrapper">
    <img src=http://placekitten.com/50/50 alt="Thumbnail photo" />
  </div>
</div>

jsFiddle