0

У меня имеется вот такое меню:

введите сюда описание изображения

Мне нужно, что бы при нажатии на кнопку, свойство в css менялось с background-position: left x px top 0px на background-position: left x px top 32px, и сразу же на background-position: left x px top -32px. Так как для кнопок я использую один png:

введите сюда описание изображения

При этом после нажатия на другую кнопку, предыдущая возвращалась к начальному background-position.

У меня получилось сделать изменение свойства только один раз, т.к. setTimeout() не сработал. При этом после нажатия на кнопку она навсегда остаётся "зажатой".

Мой код HTML

<div class="buttons">
    <div class="btn_1" onclick="change_btn_1(this)"></div>
    <div class="btn_2" onclick="change_btn_2(this)"></div>
    <div class="btn_3" onclick="change_btn_3(this)"></div>
</div>

CSS

.buttons {
    position: absolute;
    z-index: 1;
    width: 196px;
    height: 32px;
}

.btn_1 {
    position: absolute;
    left: 4px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left 0px top 0px;
}

.btn_2 {
    position: absolute;
    left: 68px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left -60px top 0px;
}

.btn_3 {
    position: absolute;
    left: 132px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left 60px top 0px;
}

JS

function change_btn_1(ind) {
    ind.style.backgroundPosition = "left 0px top 32px";
    ind.style.backgroundPosition = "left 0px top -32px";
}

function change_btn_2(ind) {
    ind.style.backgroundPosition = "left -60px top 32px";
    ind.style.backgroundPosition = "left -60px top -32px";
}

function change_btn_3(ind) {
    ind.style.backgroundPosition = "left 60px top 32px";
    ind.style.backgroundPosition = "left 60px top -32px";
}

1 ответ 1

1

Тут лучше оперировать классами типа active и inactive, чем менять стили с помощью element.style.

Вешаем на каждую кнопку по 2 слушателя: mousedown и mouseup, в которых мы будем переключать классы.

mousedown - срабатывает когда любая кнопка мыши была нажата.

mouseup - срабатывает когда любая нажатая кнопка мыши была отжата.

const buttons = document.querySelector('.buttons'); // родительский элемент

for(let button of buttons.children) { // пробегаем по всем дочерним элемент нодам
  /** любая кнопка мыши нажата */
  button.addEventListener('mousedown', function() {
    this.classList.add('active');
  });
  /** любая кнопка мыши отжата */
  button.addEventListener('mouseup', function() {
    this.classList.remove('active');
    this.classList.toggle('inactive');
  });
}
:root {
  --sprite: url('data:image/png;base64,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');
}

.buttons {
  position: absolute;
  z-index: 1;
  width: 196px;
  height: 32px;
}

/* общие свойства для всех 3-х селекторов */
.btn_1, .btn_2, .btn_3 {
  position: absolute;
  width: 60px;
  height: 32px;
  background-image: var(--sprite);
}

.btn_1 {
  left: 4px;
  background-position: left 0px top 0px;
}

.btn_2 {
  left: 68px;
  background-position: left -60px top 0px;
}

.btn_3 {
  left: 132px;
  background-position: left 60px top 0px;
}

.btn_1.inactive {
   background-position: left 0px top 32px;
}
.btn_1.active {
   background-position: left 0px top -32px;
}

.btn_2.inactive {
   background-position: left -60px top 32px;
}

.btn_2.active {
   background-position: left -60px top -32px;
}

.btn_3.inactive {
   background-position: left 60px top 32px;
}
.btn_3.active {
   background-position: left 60px top -32px;
}
<div class="buttons">
    <div class="btn_1"></div>
    <div class="btn_2"></div>
    <div class="btn_3"></div>
</div>

Для того, чтобы все это работало, например, только для ЛКМ, нужно добавлять дополнительную проверку.

const buttons = document.querySelector('.buttons');

for(let button of buttons.children) {
 button.addEventListener('mousedown', function(event) {
  if (event.button != 0) return; // Если любая кнопка кроме лкм возвращаем void
  this.classList.add('active');
 });
 button.addEventListener('mouseup', function(event) {
  if (event.button != 0) return; // Если любая кнопка кроме лкм возвращаем void
  this.classList.remove('active');
  this.classList.toggle('inactive');
 });
}
:root {
  --sprite: url('data:image/png;base64,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');
}

.buttons {
  position: absolute;
  z-index: 1;
  width: 196px;
  height: 32px;
}

/* общие свойства для всех 3-х селекторов */
.btn_1, .btn_2, .btn_3 {
  position: absolute;
  width: 60px;
  height: 32px;
  background-image: var(--sprite);
}

.btn_1 {
  left: 4px;
  background-position: left 0px top 0px;
}

.btn_2 {
  left: 68px;
  background-position: left -60px top 0px;
}

.btn_3 {
  left: 132px;
  background-position: left 60px top 0px;
}

.btn_1.inactive {
   background-position: left 0px top 32px;
}
.btn_1.active {
   background-position: left 0px top -32px;
}

.btn_2.inactive {
   background-position: left -60px top 32px;
}

.btn_2.active {
   background-position: left -60px top -32px;
}

.btn_3.inactive {
   background-position: left 60px top 32px;
}
.btn_3.active {
   background-position: left 60px top -32px;
}
<div class="buttons">
    <div class="btn_1"></div>
    <div class="btn_2"></div>
    <div class="btn_3"></div>
</div>

2
  • Спасибо, вы очень помогли. Если не сложно, ответьте ещё на пару вопросов. 1) Как решить баг, если зажать кнопку и перевести мышь на другое любое место, кнопка останется в промежуточном варианте 2) Как сделать так, что бы при нажатии второй кнопки, первая становилась обычной
    – ISEDEKU
    6 июл 2022 в 23:13
  • 1
    @ISEDEKU чтобы отследить момент, когда курсор покинул область кнопки, на кнопке нужен еще один слушатель mouseleave.
    – Neverm1ndo
    7 июл 2022 в 0:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.