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

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伪选择器中使用它。如果没有，定位/覆盖两者可能比它的价值更麻烦。当然，这一切都没有看到您的图像。我错了。