wadara
@wadara

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

....................................................................................................................................................................................
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 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(...) } // Новое изображение
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы