Изменения одного селектора при нажатии на другой

Question

Уже очень долгое время пытаюсь понять как это работает, но все не выходит.

Нужно, чтобы при наведении на Button менялся цвет и Button и TextHoverButton

.button {
  font-family: "Oswald", sans-serif;
  display: inline-block;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 54px;
  border-radius: 4px;
  color: #FF294D;
  border: 1px solid #ff294d;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.TextHoverButton {
  color: #FF294D;
}

.button:hover+.TextHoverButton {
  color: #1CCAFF;
}

<div class="container text-center">
  <h1 class="TextHoverButton">About</h1>
  <a class="button color-hero-banner" href="#">Error</a>
</div>

Answer 1

"+" в CSS — соседний селектор справа от указанного. Т.е. согласно написанному вами

.button:hover+.TextHoverButton { color: #1CCAFF;}

это работает так... при наведении курсора на .button должен измениться цвет у .TextHoverButton однако в HTML у вас они стоят наоборот

С учётом уже написанного вами CSS, чтобы "+" работал хотя бы капельку осмысленно вам нужно поменять местами <h1> и <a>.

Однако в постановке задачи вы пишите вообще другое: "Изменения селектора при нажатии на другой". "Нажатие" — это другой тип событий (:focus). А тут, с учётом вашего кода вообще начинается каша, поскольку тег — гиперссылка для перехода, а не <кнопка>. Т.е. мы можем конечно визуализировать нажатие, но работать оно будет ровно до перехода по ссылке, если таковая будет вместо якоря "#".

Ну а пока смотрим? Всё, что я описал выше, реализовано ниже: поменял местами теги и изменил событие на :focus

.button {
  font-family: "Oswald", sans-serif;
  display: inline-block;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 54px;
  border-radius: 4px;
  color: #FF294D;
  border: 1px solid #ff294d;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.TextHoverButton {
  color: #FF294D;
}

.button:focus+.TextHoverButton {
  color: #1CCAFF;
}

<div class="container text-center">
  <a class="button color-hero-banner" href="#">Error</a>
  <h1 class="TextHoverButton">About</h1>
</div>

Если же вы и правда хотите разобраться, то лучше почитайте что-нибудь вводное и полезное прежде чем задавать вопросы. https://learn.javascript.ru/css-selectors

БЛОГ НА HUSL

Изменения одного селектора при нажатии на другой

Ответы (1 шт):