CSS - 根据同一 Div 内的图像颜色更改 Div 背景颜色

Question

我想在将鼠标悬停在 div 上时更改其背景颜色，具体取决于同一 div 内的图标。

有人知道使用什么（CSS、Bootstrap ...）以简单的方式做到这一点，以及如何做？

这是一个示例链接：https : //appsource.microsoft.com/en-us/marketplace/apps

如果你不想打开链接，那是一张图片：

Answer 1

通过重新使用放大了几次（~10）的完全相同的图像，position:absolute与巨大的模糊因子重叠，同时修剪其溢出，您正在寻找的效果是可能的：

.card { 
  height: 250px;
  width: 150px;
  margin: 1rem;
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 6px;
}
.top-bar {
  padding: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.top-bar img {
  width: 36px;
  z-index: 1;
  position: relative;
}
.top-bar img.blur {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 512px;
  filter: blur(51.2px);
  opacity: .07;
}
.card:hover img.blur {
  opacity: .42;
}

<div class="card">
  <div class="top-bar">
    <img src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/sbsoft.poweraddon-marketing-cloud.1.0.1/Icon/large.png">
    <img class="blur" src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/sbsoft.poweraddon-marketing-cloud.1.0.1/Icon/large.png">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/intershop.50cca231-26fa-4e4f-a8e6-b73522817243.1.0.5/Icon/large.png">
    <img class="blur" src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/intershop.50cca231-26fa-4e4f-a8e6-b73522817243.1.0.5/Icon/large.png">
  </div>
</div>

您可以通过添加一个 JS 来进一步改进这一点，该 JS 只需动态复制<img>并将类.blur应用于它（因此您不必手动向每张卡片添加两个图像）。

注意 css-filters 还没有完整的浏览器支持。
在您链接的示例中，模糊是使用 SVG <filter>（浏览器支持稍好）和 a 完成的<feGaussianBlur>，但原理是相同的。