it-swarm.com.ru

Что такое селектор мыши в CSS?

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

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

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

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

button:mousedown{
  //some styling
}

спасибо

93
multimediaxp

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

 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

135
jansmolders86

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

button:active:hover {}
27
shawn98ag

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

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

26
woohooGuy

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

0
Mees