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

Question

我正在编辑 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 制作的，所以我无法更改 class 名称，或使用任何 JavaScript.

Answer 1

我能够通过不定位图像而是使用 first-child 来让它工作，就像这样：

 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%;
    }

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

Cannot set content property of img tag in Firefox

html

css

firefox

squarespace

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

Cannot set content property of img tag in Firefox

html

css

firefox

squarespace

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