如何在着陆页图形上添加鼠标悬停图像

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

谢谢。

图片 - 我想在鼠标悬停时更改每个六边形。

所以我认为也许SVG动画可以为此工作。但我不确定。我想在每个彩色六边形上添加一个鼠标悬停。

Answer 1

只需添加:hover伪选择器：

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

  

我想要学习的是参与图形变化   当你把鼠标放在它上面时。

虽然这更像是一个与图形相关的解决方案与代码相比，您可以复制原始图像，根据自己的喜好略微改变它，并在:hover伪选择器中使用它。如果没有，定位/覆盖两者可能比它的价值更麻烦。当然，这一切都没有看到您的图像。我错了。