Що таке селектор миші в CSS?

114

Я помітив, що кнопки та інші елементи мають стилі за замовчуванням і поводяться в 3 кроки: звичайний перегляд, наведення курсора / фокусування та перегляд маусауна / клацання, у 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 перемикач миші, мишоловка, мусудоун, миші для зображення чи кнопки?

— Ng2-Fun

@ J.Fun насправді, ви можете спробувати досягти бажаного ефекту, скориставшись: курсором наведення курсора для переключення / залишення та: активного для вниз / вгору Але ви не можете розмежувати два без JavaScript.

— jansmolders86

50

Я зрозумів, що це поводиться як подія в мусоні:

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 Звичайно, він може стати: активним до того, як: hover'ed. Ви можете активувати його за допомогою клавіатури, яка не наближається.

— ANeves

2

Нещодавно я з'ясував, що :active:focusв css робиться те саме, що :active:hoverякщо вам потрібно переоформити спеціальну бібліотеку css, вони можуть використовувати обидва.

— Міє
джерело