CSS 鼠标悬停修改 src 图片

我不想写CSS，不想写CSS，不想写CSS 😡…

自从公司内部转岗，就开始了移动端转 Web 端的不归之路 …
需求要悬停的时候，把置灰的问号改成彩色问号，同时给个提示 …

• 悬停前

• 悬停后

<el-tooltip
  class="item"
  effect="dark"
  content="您已提油，系统完成出库，如有疑问请联系客服处理电话“400-888-6888”"
  placement="bottom"
>
  <div class="">
    <img
      src="@/assets/images/oilIcon/tip_status_0.png"
      class="image"
    />
  </div>
</el-tooltip>

.status {
  flex-direction: row;
  align-items: center;
  display: flex;
  .image {
    width: 16px;
    height: 16px;
    display: block;
  }

  .image:hover {
    content: url("~@/assets/images/oilIcon/tip_status_2.png"); /*鼠标悬浮时更换背景图片*/
  }
}