Лишние элементы при разных состояниях элемента (hover, focus, active)

@ne_Proger · Регистрация: 01.11.2021

Студворк — интернет-сервис помощи студентам

Помогите разобраться с эффектами при разных состояниях ссылки в меню
По умолчанию все нормально, вопросов нет.
Ховер и фокус тоже нормально.
Но если ссылку в фокусе и наводим на нее мышкой, то по низу ссылки остается подчеркивание. Как убрать? Чтобы при Фокус + ховер была только рамка.
И такая же проблема при Фокус + Эктив. А должен только измениться цвет и появится подчеркивание снизу, рамка вокруг должна пропасть

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.link {
  position: relative;
  outline: none;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  transition: color 0.3s ease-in-out;
}
 
.link::after{
  position: absolute;
  content: '';
  border: 2px solid transparent;
  padding: 3px;
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  transition: border-color 0.3s ease-in-out;
}
 
.link:focus::after{
  border-color: #d9a85f;
}
 
.link:hover {
  border-bottom: 2px solid #d9a85f;
}
 
.link:active {
  border-color: #d9a85f;
  color: #d9a85f;
  border-bottom: 2px solid #d9a85f;
}

@AlexZaw · 06.07.2023, 14:34

Сообщение от ne_Proger

Помогите разобраться с эффектами при разных состояниях ссылки в меню

При разных состояниях вы меняете разные свойства у разных элементов (самой ссылки и псевдоэлемента если точнее) не обнуляя уже сработавшие эффекты, поэтому эти эффекты и накладываются друг на друга.
Поправить можно так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.link:focus:not(:active)::after {
  border-color: #d9a85f;
}
 
.link:hover:not(:focus) {
  border-bottom: 2px solid #d9a85f;
}
 
.link:active {
  color: #d9a85f;
  border-bottom: 2px solid #d9a85f;
}

или так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.link:hover {
  border-bottom: 2px solid #d9a85f;
}
 
.link:hover:after {
  border-color: transparent;
}
 
.link:focus {
  border: none;
}
 
.link:focus::after {
  border-color: #d9a85f;
}
 
.link:active {
  color: #d9a85f;
  border-bottom: 2px solid #d9a85f;
}
 
.link:active::after {
  border-color: transparent;
}

или же так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.link:hover::after {
  border-bottom: 2px solid #d9a85f;
}
 
.link:focus::after {
  border-color: #d9a85f;
}
 
.link:active {
  color: #d9a85f;
}
 
.link:active::after {
  border-color: transparent;
  border-bottom: 2px solid #d9a85f;
}

Причем во втором и третьем примере важен именно такой порядок состояний.
Может можно и еще варианты придумать, но голова пока не варит - только проснулся

да и спал 4 часа всего.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .