CSS'de fare aşağı seçici nedir?

114

Düğmelerin ve diğer öğelerin varsayılan bir stile sahip olduğunu ve 3 adımda davrandığını fark ettim: normal görünüm, fareyle üzerine gelme / odak görünümü ve fare aşağı / tıklama görünümü, CSS'de normal görünümün ve fareyle üzerine gelme görünümünün stilini şu şekilde değiştirebilirim:

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

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

ancak fareyi nasıl seçebilirim? Bunun gibi bir şey istiyorum:

button:mousedown{
  //some styling
}

Teşekkürler

html css css-selectors

— multimediaxp
kaynak

1

Stackoverflow.com/questions/2725458/css-on-mouse-down'un

— Xavier

@ x4vier: Sanmıyorum. Sonra tekrar, bu durumda "fare aşağı" ile ne anlama geldiğini söylemek zor.

— BoltClock

160

Aktif durumu kastettiğini düşünüyorum

 button:active{
  //some styling
 }

Bunlar, bir bağlantının CSS'de sahip olabileceği tüm olası sözde durumlar:

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 */

Ayrıca bkz .: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

— jansmolders86
kaynak

2

Bağlantı istemiyorum, düğmelere ihtiyacım var, özellikle mobil cihazlarda gezinmek çirkin bir aksaklık yaratıyor. Teşekkürler

— multimediaxp

Bu durumda, düğmeyi daha eksiksiz biçimlendiririm. Bir sınır ekleyerek: 0; düğmenin etrafındaki çerçeveyi ve yaşadığınız sorunu kaybedersiniz.

— jansmolders86

@ jansmolders86 Css'de bir resim veya düğme için mouseover, mouseleave, mousedown, mouseup seçici olup olmadığını biliyor musunuz?

— Ag2-Fun

@ J.Eğlenceli değil, istediğiniz efekti üzerinde / bırakma için: hover durumunu ve aşağı / yukarı için: aktif seçeneğini kullanarak elde etmeye çalışabilirsiniz. Ancak javascript olmadan ikisi arasında ayrım yapamazsınız.

— jansmolders86

50

Bunun bir fare düşme olayı gibi davrandığını anladım:

button:active:hover {}

— shawn98ag
kaynak

33

Ön ipucu Not: bazı nedenlerden dolayı, CSS sözdizimi ihtiyacı:activepasajı sonra:hover etkili olması için aynı element için

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

— woohooGuy
kaynak

2

CSS sırayla değerlendirildiğinden bu mantıklıdır; bir eleman, kendisinden :activeönce olamaz :hover.

— InTheZone

2

Ayrıca, işe yaraması için :activepeşinde :focusolması gerekir. Bunu belirttiğiniz için teşekkürler, CSS'min neden hiçbir etkisinin olmadığı konusunda gerçekten kafamı karıştırıyordum!

— Michael

1

@InTheZone Elbette: üzerine gelmeden önce: aktif hale gelebilir. Üzerine gelmeyen klavye ile etkinleştirebilirsiniz.

— ANeves

2

Geçenlerde bunun :active:focuscss'de aynı şeyi yaptığını öğrendim , :active:hoversanki özel bir css kitaplığını geçersiz kılmanız gerekiyor, ikisini de kullanabilirler.

— Mees
kaynak