我正在編輯一個SquareSpace網站的一些畫廊影像。我基本上是在嘗試添加一個懸停效果。我在除 Firefox 之外的所有瀏覽器上都能運行。
我基本上有一個隱藏的影像，該影像的不透明度在懸停時發生變化。
問題似乎出在設定img標簽的內容屬性上。
figure:nth-child(1) div.gallery-grid-item-wrapper {
background-image: url("url/to/original/image")!important;
背景尺寸: 覆寫。
背景-位置。50% 50%;
}
figure:nth-child(1) img {
content: url("url/to/hover/image");
不透明度：0！重要。
}
figure:nth-child(1) img:hover{
不透明度：1！重要。
過渡：不透明度為0.3s。
-webkit-transition: opacity 0.3s;
對于火狐瀏覽器，是否有不同的方法來設定圖片的內容？不幸的是，由于原始網站是用Squarespace制作的，我不能改變類的名稱，或使用任何JavaScript。
uj5u.com熱心網友回復：
我能夠通過不針對圖片，而是使用第一子項來使其作業，就像這樣：
figure:nth-child(1) div.gallery-grid-item-wrapper{
background-image: url("url/to/original/image")!important;
背景尺寸: cover;
背景-位置。50% 50%;
}
figure:nth-child(1) div.gallery-grid-item-wrapper :first-child {
content: url("url/to/hover/image");
不透明度：0！重要。
}
figure:nth-child(1) div.gallery-grid-item-wrapper :first-child:hover {
不透明度：1！重要。
過渡：不透明度0.3s。
-webkit-transition: opacity 0.3s;
max-width:100%;
max-height:100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320694.html
標籤：
上一篇：如何處理selenium和geckodriver的安裝錯誤？
下一篇：我如何找到Firefox的日志？