Active и hover элементы - как исключить одновременные св-ва для одного элемента

@antlantis · Регистрация: 07.08.2015

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

Здравствуйте, уважаемые форумчане

Подскажите пожалуйста по CSS

Как исключить одновременное применение свойств для одного элемента, если он попадает под применение active и hover?

То есть например, при выборе элемента применяются к нему свойства класса "active" - например черное подчеркивание (border-bottom)

Но вот если навести на этот же, уже выбранный элемент ( т.е. к нему уже применены свойства "active"), навести на него - т.е. к нему дополнительно применяются свойства "hover"

И если "hover" например тоже поставить нижнее подчеркивание, то этому элементу уже придается ДВОЙНОЕ подчеркивание.

Линия становится в два раза толще...

Подскажите пожалуйста, можно ли при наведении на уже активный элемент, сделать так чтобы к нему свойства "hover" уже не применялись!

Спасибо большое! всех с НОВЫМ ГОДОМ!!!!

@Htext · 02.01.2018, 17:29

Эти свойства должны идти в определенном, не произвольном, порядке:

CSS
1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

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

Добавлено через 1 минуту

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

на этот же, уже выбранный элемент

Вроде как (если вести речь о мыши, не о планшетах или т.п.), вначале мышь наводится, а потом элемент выбирается ею (при клике).

Добавлено через 58 секунд

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

на уже активный элемент

Может, Вы focus имеете в виду?

@antlantis · 02.01.2018, 17:59 **[ТС]**

Htext, Спасибо что уделили время!)

....Вроде как (если вести речь о мыши, не о планшетах или т.п.), вначале мышь наводится, а потом элемент выбирается ею (при клике)...

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

Про порядок записи:

CSS
1
2
ul.tabs li :hover {border-bottom: 1px solid #000;color:#000;}
ul.tabs li :active {border-bottom: 1px solid #000;background-color:#fff; margin-bottom:-1px;}

Вот в таком порядке пишу свойства
При этом получается двойное подчеркивание "border-bottom: 1px solid #000;"

Про "focus" я не в курсе, использую hover)) почитаю в чем разница

@Htext · 02.01.2018, 20:55

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

потом курсор мыши с него убираем

А кнопку мыши-то отпускаем?

Добавлено через 2 минуты

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

Вот в таком порядке пишу свойства

Все-таки, попробуйте , как я указал. в п.2 (и/или в п.1) обнулить свойство подчеркивания: border-bottom: none

Добавлено через 1 минуту

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

margin-bottom:-1px;

Это ни к чему.

@boilzzz · 02.01.2018, 21:46

antlantis, https://codepen.io/boilzzz/pen/zpzmXB?editors=1100 так?

HTML5
1
<a href="#">123</a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a{
  text-decoration: none;
  position: relative;
}
a::before{
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
  z-index: 10;
}
a:focus{
  border-bottom: 1px solid #000;background-color:#fff; margin-bottom:-1px;
}
a:hover:before{
  content:'';
}
a:active{
  border-bottom: 1px solid #000;background-color:#fff; 
}

@antlantis · 02.01.2018, 23:34 **[ТС]**

boilzzz, да, результат как раз такой - двойное подчеркивание!
А как от него избавиться? чтобы к активному уже выбранному элементу при наведении свойства "hover" не применялись?

Htext, да мышь отпускаем

Если поставить "border-bottom: none" в class "hover" или "activ", то подчеркивание появляется только либо активного элемента, либо наведенного

@boilzzz · 03.01.2018, 01:10

antlantis, Так, я то сделал вам пример двойного подчеркивания, думал в этом задумка)
Так? https://codepen.io/boilzzz/pen/zpzmXB?editors=1100

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a{
  text-decoration: none;
  position: relative;
}
a:focus{
  border-bottom: 1px solid #000;background-color:#fff; 
}
a:hover{
  border-bottom: 1px solid #000;background-color:#fff; margin-bottom:-1px;
}
 
a:active{
  border-bottom: 1px solid #000;background-color:#fff; 
}

@antlantis · 05.01.2018, 14:27 **[ТС]**

boilzzz, да! Спасибо Вам огромное за помощь!!!!
Htext и Вам спасибо большое!!!

Извините, если невнятно задал вопрос)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@antlantis 4 / 4 / 0 Регистрация: 07.08.2015 Сообщений: 102

	Active и hover элементы - как исключить одновременные св-ва для одного элемента 02.01.2018, 16:08. Показов 7282. Ответов 7 Метки нет (Все метки) Здравствуйте, уважаемые форумчане Подскажите пожалуйста по CSS Как исключить одновременное применение свойств для одного элемента, если он попадает под применение active и hover? То есть например, при выборе элемента применяются к нему свойства класса "active" - например черное подчеркивание (border-bottom) Но вот если навести на этот же, уже выбранный элемент ( т.е. к нему уже применены свойства "active"), навести на него - т.е. к нему дополнительно применяются свойства "hover" И если "hover" например тоже поставить нижнее подчеркивание, то этому элементу уже придается ДВОЙНОЕ подчеркивание. Линия становится в два раза толще... Подскажите пожалуйста, можно ли при наведении на уже активный элемент, сделать так чтобы к нему свойства "hover" уже не применялись! Спасибо большое! всех с НОВЫМ ГОДОМ!!!! 0

@antlantis 4 / 4 / 0 Регистрация: 07.08.2015 Сообщений: 102
	02.01.2018, 23:34 [ТС]
	boilzzz, да, результат как раз такой - двойное подчеркивание! А как от него избавиться? чтобы к активному уже выбранному элементу при наведении свойства "hover" не применялись? Htext, да мышь отпускаем Если поставить "border-bottom: none" в class "hover" или "activ", то подчеркивание появляется только либо активного элемента, либо наведенного 0

@antlantis 4 / 4 / 0 Регистрация: 07.08.2015 Сообщений: 102
	05.01.2018, 14:27 [ТС]
	boilzzz, да! Спасибо Вам огромное за помощь!!!! Htext и Вам спасибо большое!!! Извините, если невнятно задал вопрос) 0

Active и hover элементы - как исключить одновременные св-ва для одного элемента

Решение