Задать вопрос
@MisterVerstalschyk
html

Почему не срабатывает :hover?

Почему при наведение на первую ссылку вторая исчезает, а при наведение на вторую первая не исчезает?
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <div class="header__auth">
      <a class="header__auth-signin">Log In</a>
      <a class="header__auth-signup">Sign Up</a>
    </div>
  </body>
</html>


.header__auth {
  cursor: pointer;
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 184px;
  font-weight: bold;
  color: #F57B3A;
  margin: 5px 0;
  border: 1px solid #F57B3A;
  box-sizing: border-box;
  border-radius: 80px;
}

.header__auth-signup {
  opacity: 1;
  transition: 0.4s;
}

.header__auth-signin {
  opacity: 1;
  transition: 0.4s;
}

.header__auth-signin:hover ~ .header__auth-signup {
  opacity: 0;
  transition: 0.4s;
}

.header__auth-signup:hover ~ .header__auth-signin {
  opacity: 0;
  transition: 0.4s;
}
  • Вопрос задан
  • 184 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
К сожалению автор не хочет дать вменяемый ответ, того что именно ему надо, но могу сказать, что для смены видимости кнопок совсем не нужен js. Да, мы не можем смотреть назад и вверх, но можем использовать доп элементы, чтобы реализовать вот такой трюк:
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@altkov
Как и сказал Ankhena , css селекторов назад нет. Тут либо использовать js, либо предлагаю такое решение: ловить :hover не ссылок, а их контейнера (прятать все ссылки в контейнере при наведении, а ту, на которую навели, показать). Но это работает по другому (при наведении в пустое пространство все ссылки пропадут, чтобы этого не было, нужно чтобы ссылки заполняли все пространство контейнера)

css

.header__auth {
  cursor: pointer;
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 184px;
  font-weight: bold;
  color: #F57B3A;
  margin: 5px 0;
  border: 1px solid #F57B3A;
  box-sizing: border-box;
  border-radius: 80px;
}

.header__auth-signup {
  opacity: 1;
  transition: 0.4s;
}

.header__auth-signin {
  opacity: 1;
  transition: 0.4s;
}

.header__auth:hover a {
  opacity: 0;
}

.header__auth a:hover {
  opacity: 1;
}

Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Расработка Парсер для сайта https://soliq.uz/activities/debtor
19 апр. 2024, в 19:51
3000 руб./за проект
Ещё заказы