Как добавить изображение при наведении курсора на изображение целевой страницы

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 псевдо-селектор. Если нет, расположение / наложение этих двух может быть больше проблем, чем оно того стоит. Конечно, это все, не видя ваши изображения. Я могу ошибаться.