Задать вопрос
@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;
}
  • Вопрос задан
  • 201 просмотр
Комментировать
Подписаться 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 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Поправить сайт (мобильная версия) на WordPress
24 нояб. 2024, в 04:16
5000 руб./за проект
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Ещё заказы