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

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

What I want to learn to do is to make a part of the graphic change when you mouse over it.

尽管与代码相比，这更像是一个与图形相关的解决方案，但您可以复制原始图像，根据自己的喜好稍微改变一下，然后在 :hover 伪选择器中使用它。否则，positioning/overlaying 两者可能会带来更多麻烦。当然，这一切都没有看到您的图像。我可能是错的。

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

How to add a mouse-over image on a landing page graphic

javascript

jquery

html

css

flexboxgrid