Как такое реализовать?

Question

[Dpy3b]

Может кто-то подскажет готовое решение/способ реализации такой штуки? Чтобы при наведении на надпись менялся фон у всей секции на нужный.

Comments

[Strannyk]

Надпись.событие.наведение(функцЫя() {Сменить фон})

[Strannyk]

Dpy3b, так это сюда.

[Dpy3b]

Strannyk, :)
Спасибо за разъяснение по реализации

Answer 1

[Дмитрий]

Вы можете иметь отдельный json, внутри которого будет массив с объектами.

{
label: Текст пункта меню,
image: URL или путь к изображению
}

Затем парсить массив с помощью метода map, и таким образом Ваш контент футера должен быть динамическим. При наведении на каждый элемент, должны менять background-image на image из json.

Answer 2

[Liuonid]

<div class="img-block">
  <div class="text-1">Text-1</div>
  <div class="img img-1"></div>
  <div class="text-2">Text-2</div>
  <div class="img img-2"></div>
  <div class="text-3">Text-3</div>
  <div class="img img-3"></div>
</div>

.img-block {
  position: relative;
}
.img {
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index:-1;
}
.text-1:hover + .img-1 {
  background-color:red;
}
.text-2:hover + .img-2 {
  background-color:blue;
}
.text-3:hover + .img-3 {
  background-color:green;
}

В codepen почекай и додумай сам дальше.

Comments

[Liuonid]

pointer-events:none; - это отключает события в браузере. Так что бди! Можно убрать. так как z-index меньше нуля.