Задать вопрос
tony-stark77
@tony-stark77
Frontend developer (senior+)
html

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

Хочу чтобы при наведении на одну кнопку менялась эта кнопка но при этом и другая тоже меняла свой цвет, как сделать подскажите люди

https://codepen.io/remontorg/pen/gOdVXjg

<div class="vskrytiye__ot">
                <div class="vskrytiye__ot__b">
                  <a href="tel:88007000000">
                    <button class="vskrytiye__btn">
                      <span>Позвонить</span>
                    </button>
                  </a>
                </div>
                <div class="vskrytiye__ot__b">
                  <div class="open__popup">
                    <button class="vskrytiye__btn blue">
                      <span>Позвонитe мне</span>
                    </button>
                  </div>
                </div>
              </div>


.vskrytiye__btn {
  font-size: 22px;
  padding-top: 25px;
  padding-right: 30px;
  padding-bottom: 22px;
  padding-left: 30px;
  margin-top: 30px;
  border-radius: 6px;
  border-right-color: #fff;
  color: rgba(42, 41, 49);
  background-color: rgba(255, 191, 162);
  transition: all .3s ease 0s;
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.vskrytiye__btn:hover{
  background-color: rgba(131, 127, 155);
  color: #fff;
}
.vskrytiye__ot {
  display: flex;
}
.vskrytiye__ot__b {
  margin: 0 15px;
}
.blue {
  background-color: rgba(131, 127, 155);
  color: #fff;
}
.blue:hover {
  background-color: rgba(255, 191, 162);
  color: #1e2f39;
}


https://codepen.io/remontorg/pen/gOdVXjg
  • Вопрос задан
  • 295 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
delphinpro
@delphinpro Куратор тега HTML
frontend developer
Сергей Молвов, с has все довольно просто

.vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
  /* Стили для первой кнопки при наведении на вторую */
}


Заморочки с :not из-за того, что наличие класса .blue - единственное различие между кнопками

Однако можно привязаться к последовательности кнопок в html

.vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
  /* Стили для последней кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
  /* Стили для первой кнопки при наведении на последнюю */
}


Но так длиннее получается.

Лучше всего будет дать кнопкам разные классы

.vskrytiye__ot:has(.first-btn:hover) .second-btn {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.second-btn:hover) .first-btn {
  /* Стили для первой кнопки при наведении на вторую */
}


Но это не будет работать на данный момент в FireFox!
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
HTML-верстальщик (HTML/CSS/JavaScript)
CleanTalk
от 100 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать обложку для сообщества вконтакте на фигме
22 мая 2024, в 08:09
300 руб./за проект
Доработать проект на nest+react
22 мая 2024, в 07:09
50000 руб./за проект
Оптимизация WP
22 мая 2024, в 02:15
10000 руб./за проект
Ещё заказы