如何在着陸頁圖形上添加鼠標懸停圖像

Question

馬上，我不得不為不知道如何正確地表達我的問題而道歉。 希望我的觀點在這個描述中出現。

我在我正在使用的網站上有一個完整的登陸圖形。 我想要學習的是當鼠標懸停在圖形上時，將其作為圖形更改的一部分。

HTML

<header id="full-landing">

CSS

#full-landing{
background: url('../images/Asset 64.svg');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
}

謝謝。

IMAGE-我想在鼠標懸停時更改每個六邊形。

所以我認為也許SVG動畫可以為此工作。 但我不確定。 我想在每個彩色六邊形上添加一個鼠標懸停。

Answer 1

只需添加一個:hover偽選擇器：

#full-landing:hover {
  background-image: url('../images/different-image.svg');
}

我想要學習的是當鼠標懸停在圖形上時，將其作為圖形更改的一部分。

雖然這更像是一個與圖形相關的解決方案而不是代碼，但您可以復制原始圖像，根據自己的喜好略微改變它，並在您的:hover偽選擇器中使用它。 如果沒有，定位/覆蓋兩者可能比它的價值更麻煩。 當然，這一切都沒有看到您的圖像。 我錯了。