Как сделать так, чтобы при наведении на кнопки менялась картинка в блоке?

Question

[Alan Solid]

....................................................................................................................................................................................

Comments

[Rustam Bainazarov]

Зуб даю, что они структурно далеко не на одном уровне с картинкой/фоном.

Поэтому вам поможет только JS.

Более того, того кода, что вы прислали, во-первых, совершенно недостаточно, а во-вторых, никто его скриншотами не присылает.

[Максим Морев]

Оффтоп: автор, а зачем вам такие миксины, дублирующие css-свойства?

[Александр Панасин]

Напишите разметку html. А иначе в помощь «~».

Answer 1

[Александр Панасин]

Если блока стоит следующим за кнопкой можете применить +
.html

<div>
  <button class='button-replace-image'>Кнопка</button>
  <div class='replace-image'></div>
</div>

.css

.replace-image { background:url(...) ...; } // Текущее изображение
.button-replace-image:hover + .replace-image { background-image:url(...) } // Новое изображение. При наведении на кнопку следующий блок сменит фоновое изображение

Если блок в том же селекторе то ~
.html

<div>
  <button class='button-replace-image'>Кнопка</button>
  <div>Текст</div>
  <div class='replace-image'></div>
</div>

.css

.replace-image { background:url(...) ...; } // Текущее изображение
.button-replace-image:hover ~ .replace-image { background-image:url(...) } // Новое изображение. При наведении на кнопку все следующие блоки .image сменят фоновое изображение

Если блок где-то в неопределенном месте то js
.html

<div>
  <button class='js--button-replace-image' data-selector='js--replace-image'>Кнопка</button>
  <div class='replace-image js--replace-image'></div>
</div>

.js

$('.js--button-replace-image').on('mouseenter', function () {
  var $this = $(this);
  var selector = $this.data('selector');
  $(selector).addClass('--replace');
});
$('.js--button-replace-image').on('mouseleave', function () {
  var $this = $(this);
  var selector = $this.data('selector');
  $(selector).removeClass('--replace');
});

.css

.replace-image { background:url(...) ...; } // Текущее изображение
.replace-image.--replace{ background-image:url(...) } // Новое изображение