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

название в основном говорит все это.

Предположим, у меня есть элемент, который я хочу изменить цвет на :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 государство.

18
css css-selectors css-specificity html

7 ответов

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

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

<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>

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

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

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

редактировать

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

10

активное состояние должно быть объявлено после состояние наведения, в вашем 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
2

потому что в первом коде вы определили :hover после того, как вы определили :active, so :hover "overwrote":active. Во-вторых, все наоборот,:active перезаписывает :hover.

1

EDIT:

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

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

когда вы наводите курсор на ссылку и удерживаете клавишу мыши, это выглядит так, если мы берем классы pseud как обычные классы:

<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: hover должен быть помещен после A: link и a: visited правил, так как в противном случае правила каскадирования скроют цвет свойство правила наведения курсора a:. Аналогично, потому что A: active помещается после A: наведите курсор, активный цвет (лайм) будет применяться, когда пользователь оба активирует и парит над A элемент.

0

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

пример:

li.betterList { better list styling here }

более конкретно и будет перезаписывать

li { list styling here }

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

Примечание: :active должен прийти после: наведите (если есть) в определении CSS, чтобы быть эффективным!

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

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

это ожидаемое поведение поскольку большинство людей всегда размещают :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: hover должен быть помещен после A: link и a: visited правил, так как в противном случае правила каскадирования скроют цвет свойство правила наведения курсора a:. Аналогично, потому что A: active помещается после A: наведите курсор, активный цвет (лайм) будет применяться, когда пользователь оба активирует и парит над A элемент.

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

даже W3schools получает это право:

Примечание: a: наведение должно происходить после A: link и a: visited в CSS определение для того чтобы быть эффективным!!

Примечание: a: active должен прийти после A: наведите указатель мыши в определении CSS в порядке быть эффективно!!

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

0

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

как правило,

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

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

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

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

a:visited:active {
     color: red;   
}

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

0