Apa itu pemilih mouse ke bawah di CSS?

114

Saya perhatikan bahwa tombol dan elemen lainnya memiliki gaya default dan berperilaku dalam 3 langkah: tampilan normal, tampilan hover / fokus dan tampilan mousedown / klik, di CSS saya dapat mengubah gaya tampilan normal dan tampilan hover seperti ini:

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

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

tapi bagaimana cara memilih mousedown? Saya ingin sesuatu seperti ini:

button:mousedown{
  //some styling
}

Terima kasih

html css css-selectors multimediaxp
sumber
1
Sepertinya duplikat stackoverflow.com/questions/2725458/css-on-mouse-down
Xavier
@ x4vier: Sepertinya tidak. Kemudian lagi, sulit untuk mengatakan apa yang dimaksud dengan "mouse down" dalam kasus ini.
BoltClock

Jawaban:

160

Saya pikir maksud Anda keadaan aktif

 button:active{
  //some styling
 }

Ini semua adalah kemungkinan pseudo state yang dapat dimiliki link di 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 */

Lihat juga: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

jansmolders86
sumber
2
Saya tidak ingin tautan, saya perlu tombol, terutama karena di perangkat seluler, hover membuat kesalahan yang buruk. Terima kasih
multimediaxp
Tambahkan dalam kasus itu saya akan memberi gaya tombol lebih lengkap. Dengan menambahkan perbatasan: 0; Anda kehilangan bezel di sekitar tombol dan masalah yang Anda hadapi.
jansmolders86
@ jansmolders86 Tahukah Anda jika ada mouseover, mouseleave, mousedown, pemilih mouseup untuk gambar atau tombol di css?
Ng2-Fun
@ J.Fun tidak terlalu, Anda bisa mencoba mendapatkan efek yang diinginkan dengan menggunakan status: hover untuk over / leave dan: active untuk bawah / atas. Tetapi Anda tidak dapat membedakan keduanya tanpa javascript.
jansmolders86
50

Saya menemukan bahwa ini berperilaku seperti acara mousedown:

button:active:hover {}
shawn98ag.dll
sumber
33

Pro-tip Catatan: untuk beberapa alasan, sintaks CSS membutuhkan:activepotongan setelah itu:hoveruntuk unsur yang sama agar efektif

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

woohooGuy
sumber
2
CSS dievaluasi secara berurutan jadi ini masuk akal; sebuah elemen tidak bisa menjadi :activesebelumnya :hover.
InTheZone
2
Juga, :activeharus setelah :focusitu untuk bekerja. Terima kasih telah menunjukkan hal ini, saya benar-benar menggaruk-garuk kepala mengapa CSS saya tidak berpengaruh!
Michael
1
@InTheZone Tentu saja itu bisa menjadi: aktif sebelum: melayang. Anda dapat mengaktifkannya dengan keyboard, yang tidak melayang.
ANeves
2

Saya baru-baru ini menemukan bahwa :active:focusmelakukan hal yang sama di css seolah- :active:hoverolah Anda perlu mengganti pustaka css khusus, mereka mungkin menggunakan keduanya.

Mees
sumber