Что такое селектор «вниз» в CSS?

114

Я заметил, что кнопки и другие элементы имеют стиль по умолчанию и ведут себя в 3 этапа: нормальный вид, вид наведения / фокуса и вид mousedown / щелчок, в CSS я могу изменить стиль обычного вида и вид наведения следующим образом:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

но как я могу выбрать мышку? Я хочу что-то вроде этого:

button:mousedown{
  //some styling
}

Спасибо

html css css-selectors

— multimediaxp
источник

1

Похоже на дубликат stackoverflow.com/questions/2725458/css-on-mouse-down

— Ксавье

@ x4vier: Я так не думаю. Опять же, трудно сказать, что в данном случае означает «мышь вниз».

— BoltClock

160

Я думаю вы имеете в виду активное состояние

 button:active{
  //some styling
 }

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

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

См. Также: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
источник

2

Мне не нужны ссылки, мне нужны кнопки, особенно потому, что на мобильных устройствах при наведении курсора происходит некрасивая ошибка. Спасибо

— multimediaxp

Добавьте, в таком случае, я бы стилизовал кнопку более полно. Добавив границу: 0; вы теряете рамку вокруг кнопки и проблему, которая у вас возникла.

— jansmolders86

@ jansmolders86 Знаете ли вы, есть ли в css селектор mouseover, mouseleave, mousedown, mouseup для изображения или кнопки?

— Ng2-Fun

@ J.Fun не совсем, вы можете попытаться получить желаемый эффект, используя состояние: hover для перехода / выхода и: active для перехода вниз / вверх. Но без javascript их невозможно отличить.

— jansmolders86 02

50

Я понял, что это ведет себя как событие mousedown:

button:active:hover {}

— shawn98ag
источник

33

Pro-наконечник Примечание: по какойто причине, синтаксис CSS нужен:activeфрагмент кода после:hover для того же элемента, чтобы быть эффективным

http://www.w3schools.com/cssref/sel_active.asp

— woohooGuy
источник

2

CSS оценивается по порядку, так что это имеет смысл; элемент не может стать :activeраньше, чем он есть :hover.

— InTheZone

2

Кроме того, :activeчтобы :focusон работал , он должен быть после . Спасибо, что указали на это, я действительно ломал голову, почему мой CSS не имел никакого эффекта!

— Майкл

1

@InTheZone Конечно, он может стать: активным до того, как: зависнет. Вы можете активировать его с помощью клавиатуры, которая не зависает.

— ANeves

2

Недавно я узнал, что :active:focusв css происходит то же самое, как :active:hoverесли бы вам нужно переопределить пользовательскую библиотеку css, они могут использовать оба.

— Mees
источник