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

Question

[Nayro TV]

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

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

<div class="vskrytiye__ot">
                <div class="vskrytiye__ot__b">
                  <a href="tel:[phone]">
                    <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

Comments

[Сергей delphinpro]

css селектор :has (не работает в FF)
Или javascript

[Nayro TV]

Eugene,ну я поискал, не даёт вроде...

[Nayro TV]

Сергей delphinpro, has почитаю что это, а js не хочу брать просто)

Answer 1

[Сергей delphinpro]

Сергей Молвов, с 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!

Comments

[Nayro TV]

я ооочень благодарен вашим ответом, я попробовал последний вариант, пере назвал классы, но ничего не работает...
https://codepen.io/remontorg/pen/gOdVXjg
поменял там вроде всё что надо взгляните пожалста

[Сергей delphinpro]

Сергей Молвов, вроде работает. что не так?

[Nayro TV]

Сергей delphinpro, Простите но тама вроде на работает...
https://www.youtube.com/watch?v=xVOoE2vdBM4

[Nayro TV]

Сергей delphinpro, https://www.youtube.com/watch?v=xVOoE2vdBM4

[Nayro TV]

Сергей delphinpro, При наведении на одну не меняется другая... но я всё равно благодарен за ваш "ответ"... отмечу решением для других (может)