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过滤器尚没有完整的browser support。
在您链接的示例中，模糊是使用SVG <filter>（略好一些browser support）和<feGaussianBlur>完成的，但是原理是相同的。