懸停svg文件上的CSS不會出現

在我的情況下，我有2個單獨的svg圖標文件。其中一個是白色的，另一個是橙色的。懸停svg文件上的CSS不會出現

這是圖標的第一個狀態。

.c-icon-not-favorite { 
    background-image: url("../img/poster_fav_icon_white.svg"); 
}

這是懸停行爲。

.c-icon-not-favorite:hover { 
    background-image: url("../img/poster_fav_icon_orange.svg"); 
}

但懸停橙色svg圖標不顯示。我該怎麼解決這個問題。我正在尋找一段時間。我還沒有解決。

------ -----編輯

我解決了這個問題，增加了額外的屬性.c-icon-not-favorite類。屬性是; width, height, position: absolute, top:0, right:1%。之後，它完美地工作。這很荒謬。

感謝您的建議。

來源

2017-05-04 Yasin Yörük

請在顯示問題的問題中添加[mcve]。 –

你確定你的圖片鏈接正在工作嗎？ –

@RobertLongson對不起。這是我們公司的一個永恆的項目。它在本地服務器上工作。所以需要很長時間才能進行演示。我真的很抱歉。 –

您的代碼是正確的。最有可能的問題是圖像文件本身。

.c-icon-not-favorite { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/67/Apollo_17_Image_Of_Earth_From_Space.jpeg"); 
 
    background-position: center; 
 
    cursor: pointer; 
 
} 
 

 
.c-icon-not-favorite:hover { 
 
    background-image: url("http://www.publicdomainpictures.net/pictures/30000/velka/dandelion-133684137252N.jpg"); 
 
    }

<div class="c-icon-not-favorite"></div>

與SVG與類div標籤裏

來源

2017-05-04 13:47:37

採取img標籤。懸停div標籤時，隱藏img標籤並顯示背景圖像。默認情況下，使用SVG顯示img標記。

來源

2017-05-04 16:35:38 Super

懸停svg文件上的CSS不會出現

回答

相關問題