Почему псевдокласс hover перекрывает активный псевдокласс

Question

Название в основном говорит само за себя.

Предположим, у меня есть элемент, который я хочу изменить на :hover, но при нажатии я хочу, чтобы он снова переключился на свой исходный цвет. Итак, я попробовал это:

a:link, a:visited, a:active {
    background: red;
}
a:hover {
    background: green;
}

Как оказалось, это не работает. После долгих царапин я понял, что состояние :hover переопределяет состояние :active. Это было легко решено этим:

a:link, a:visited {
    background: green;
}
a:hover {
    background: red;
}
a:active {
    background: green;
}

(я мог бы объединить 1-е правило с 3-м).

Вот скрипка: http://jsfiddle.net/V5FUy/

---

Мой вопрос: это ожидаемое поведение? Насколько я понимаю, состояние :active всегда должно переопределять состояние :hover, поскольку состояние :active будет почти всегда сопровождаться состоянием :hover.

Answer 1

да, это ожидаемое поведение,

давайте рассмотрим другой пример.просто добавив два класса,

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

здесь класс сначала также идет вместе с элементом класса.но если мы объявим наш CSS в неправильном порядке, который не даст желаемого поведения

.first { background: blue; }
.item { background: red; }

, как вы можете видеть, будет использован последний соответствующий селектор.это то же самое, что и ваш пример, не важно, что логичнее, 2 псевдокласса считаются равными, поэтому одни и те же правила применяют последние соответствующие выигрыши в определении.

edit

псевдоклассы равны, побеждает тот, который определен последним!вот jsFiddle, который подтверждает мою точку зрения: ссылка определена после: hover,: link wins ( test ), поэтому ваше утверждение: hover overriding: ссылка неверна, ее точно так же, как с: active, еевсе о заказе.

Answer 2

Активное состояние должно быть объявлено после состояния наведения, в вашем CSS вы объединяете активное состояние до активного состояния, чтобы оно не вызывалось.

Если вы укажете правильный порядок работы, он работает, как показано ниже, он работает нормально.

a.noworks:link, a.noworks:visited {
    background: red;
}

a.noworks:hover {
    background: green;
}

a.noworks:active {
    background: red;
}

Итак, чтобы ответить на ваш вопрос, да, это ожидаемое поведение.

Вот порядок действий:

a:link
a:visited
a:hover
a:active

Answer 3

Поскольку в первом коде, который вы определили :hover после того, как вы определили :active, то :hover "перезаписал" :active.Во втором случае все наоборот, :active перезаписывает :hover.

Answer 4

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

Обычно

1. :link всегда было значением по умолчанию (нетронутым) ,
2. Затем, когда пользователь указывает на кнопку, тогда в игру вступает :hover.
3. Как только пользователь указывает на ссылку или кнопку, он / она нажимает, и тут появляется :active.

Это стандартная последовательность взаимодействия со ссылками (или кнопками) . За исключением :visited, где результат очевиден только тогда, когда Пользователь ранее нажал на ссылку.

Было бы очень полезно, если вы помните мнемонику: ' L o V e HA te' при работе со ссылками ( за исключением :visited, который не работает для кнопок) .

Однако, если вы действительно хотите сделать переопределение, скажем, вы хотите изменить цвет ссылки, которая уже была посещена в активном состоянии, вы можете сделать что-то вроде:

a:visited:active {
     color: red;   
}

Но суть в том, чтобы избежать изменения стандартной последовательности, если в этом нет необходимости.

Answer 5

Это ожидаемое поведение , поскольку большинство людей всегда ставят псевдокласс :hover в конце группы правил.

Порядок объявления имеет значение для псевдоклассов (см. Подробнее здесь: http://reference.sitepoint.com/css/pseudoclasses),, поэтому окончательные правила имеют приоритет, как и другие правила в CSS.

Для большинства людей я считаю желаемое поведение:

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

Так как :active не так полезен, его оставляют ... или объединяют с a:link и a:visited ... и затем он переопределяется на a:hover

W3C записывает это здесь:

Обратите внимание, что указатель A: должен находиться после ссылки A: и посещения A: правила, так как в противном случае каскадные правила будут скрывать «цвет» свойство правила A: hover. Точно так же, потому что A: active размещен после A: hover, активный цвет (лайм) будет применяться, когда пользователь активирует и наводит курсор на элемент А.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Даже в W3schools это правильно:

Примечание: a: hover ДОЛЖЕН появляться после CSS-ссылки и a: посещения в CSS определение для того, чтобы быть эффективным !!

Примечание: a: active ДОЛЖЕН идти после a: hover в определении CSS в порядке быть эффективным !!

http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 6

Вот как это работает, и я постараюсь объяснить, почему. Как мы знаем, CSS продолжит поиск документа при применении стилей и применяет стиль, который наиболее специфичен для элемента.

Пример:

li.betterList { better list styling here }

Более конкретно и перезапишет

li { list styling here }

И все эти селекторы Puesdo считаются одной и той же специфичностью, и поэтому последняя строка перезапишет предыдущую. Это подтверждается запиской на W3Schools

Примечание: : активная функция ДОЛЖНА следовать после: hover (если присутствует) в определении CSS, чтобы быть эффективной!

вы также можете добавить этот CSS на свой jsfidle и посмотреть, как он перезаписывается, поскольку они имеют одинаковую специфику

.works {background: red}
.works {background: green}

Answer 7

EDIT:

Извините, я неправильно понял вопрос.

В основном, когда вы находитесь в активном состоянии (с указателем мыши), вы также фактически находитесь в состоянии наведения. Таким образом, основываясь на правилах CSS, он будет читать последний в таблице стилей.

Когда вы наводите курсор мыши на ссылку и удерживаете клавишу мыши, это происходит так, если мы возьмем псевдоклассы как обычные классы:

<a class="active hover"></a>

Так что, если ваш css был

.active{color:green}
.hover{color:red}

будет применяться красный

но если ваш css был

.hover{color:red}
.active{color:green}

Это будет применяться зеленый

С W3C

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Обратите внимание, что указатель A: должен находиться после ссылки A: и посещения A: правила, так как в противном случае каскадные правила будут скрывать «цвет» свойство правила A: hover. Точно так же, потому что A: active размещен после A: hover, активный цвет (лайм) будет применяться, когда пользователь активирует и наводит курсор на элемент А.