CSS

Question

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

有人知道使用什么（CSS、Bootstrap ...）来简单地做到这一点吗？

这是一个例子link： https://appsource.microsoft.com/en-us/marketplace/apps

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

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://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
    <img class="blur" src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://i.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
    <img class="blur" src="https://i.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
    <img class="blur" src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
  </div>
</div>

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

注意 css-过滤器还没有满 browser support。
在您链接的示例中，模糊是使用 SVG <filter> (slightly better browser support) 和 <feGaussianBlur> 完成的，但原理是相同的。

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

CSS - Change Div background color depending on an image color inside the same Div

sass

less

bootstrap-4