悬停图像时更改背景颜色

【问题标题】：change color of background when hover image悬停图像时更改背景颜色
【发布时间】：2020-09-17 14:17:00
【问题描述】：

当我的图像悬停时，我需要更改颜色。

我有 div 里面有 img，所以当我将图像悬停时，我将不透明度更改为 0.3，但颜色为白色，我想将其更改为绿色，有可能吗？？

<div class="col-md-4 col-sm-6" style="padding: 0px !important;width:50px;height: 350px">  
              <img class="img-fluid " id="myImg" src="img1.png" alt="" style="width:100%;height: 100%">
          </div>
#myImg{
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover,{
  opacity: 0.3;}

this is what I need to have

this what I am able to do

【问题讨论】：

那么设置背景色？将其设置为绿色不是您想要的吗？
您必须在图像旁边添加一个覆盖div，将其位置设置为absolute，并在悬停时更改其颜色等。

标签： html css

【解决方案1】：

您看到的白色来自背景的白色。相反，您可能想要在这里做的是更改 div 的不透明度和颜色，而不是像这样更改 img 的：

CSS

.demo{
  background-color: green;
}

#myImg:hover{
  opacity: 0.3;
}

HTML

<div class="demo col-md-4 col-sm-6" style="padding: 0px !important;width:50px;height: 350px">  
    <img class="img-fluid " id="myImg" src="https://picsum.photos/50/350" alt="" style="width:100%;height: 100%">
</div>

【讨论】：

可能更多的是更改img 的opacity 并将div 的background-color 变为绿色。我认为我们不希望 opacity 应用于 background-color。
是的，当我重新阅读我的答案时，我意识到了这一点。当您对此发表评论时，我正在进行编辑。