3

Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description.

I have a full page landing graphic on a website that I'm working with. What I want to learn to do is to make a part of the graphic change when you mouse over it.

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

Thank you.

IMAGE-I would like to change each hexagon on mouse-over.

enter image description here

So I thought that maybe SVG animation could work for this. But I am not sure. I would like to add a mouse-over to each colored hexagon.

4

1 回答 1

1

只需添加一个:hover伪选择器：

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

我想学做的是当你将鼠标悬停在图形上时，对图形的一部分进行更改。

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

于 2017-12-03T02:32:02.520 回答