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

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