无法在 Firefox 中设置 img 标签的内容属性答案

【问题标题】：Cannot set content property of img tag in Firefox无法在 Firefox 中设置 img 标签的内容属性
【发布时间】：2021-10-27 12:53:02
【问题描述】：

我正在编辑 SquareSpace 网站的一些图库图片。我本质上是在尝试添加悬停效果。我可以在除 Firefox 之外的所有浏览器上使用它。

我基本上有一个隐藏的图像，并且该图像的不透明度在悬停时会发生变化。

问题似乎在于设置 img 标签的内容属性。

figure:nth-child(1) div.gallery-grid-item-wrapper {
     background-image:  url("url/to/original/image")!important;
     background-size: cover;
     background-position: 50% 50%;
    }
    

figure:nth-child(1) img {
        content: url("url/to/hover/image"); 
      opacity: 0!important;
    }
    

figure:nth-child(1) img:hover{
        opacity: 1!important;
       transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
    }

是否有其他方法可以为 Firefox 浏览器设置图像内容？不幸的是，由于原始网站是使用 Squarespace 制作的，我无法更改类名或使用任何 JavaScript。

【问题讨论】：

你能告诉我们相关的HTML结构吗？
奇怪的是，只要有一个非空的 alt 属性，在 FF 中就可以接受 img 元素的内容。你能在那个img上加上一个属性吗？如果没有，请在 div 上使用伪元素（不能在 img 上使用它们）。
@AHaworth 谢谢，它使用伪元素

标签： html css firefox squarespace

【解决方案1】：

我能够通过不定位图像而是像这样使用第一个孩子来让它工作：

 figure:nth-child(1) div.gallery-grid-item-wrapper{
 background-image: url("url/to/original/image")!important;
 background-size: cover;
 background-position: 50% 50%;
}

figure:nth-child(1) div.gallery-grid-item-wrapper :first-child {
    content: url("url/to/hover/image");
  opacity: 0!important;
}

  figure:nth-child(1) div.gallery-grid-item-wrapper :first-child:hover {
        opacity: 1!important;
       transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
        max-width:100%;
        max-height:100%;
    }

【讨论】：