CSS में माउस डाउन सेलेक्टर क्या है?

114

मैंने देखा है कि बटन और अन्य तत्वों में एक डिफ़ॉल्ट स्टाइल है और 3 चरणों में व्यवहार करते हैं: सामान्य दृश्य, हॉवर / फ़ोकस व्यू और मूसडाउन / क्लिक व्यू, सीएसएस में मैं सामान्य दृश्य और हॉवर दृश्य की स्टाइल को इस तरह बदल सकता हूं:

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
 }

ये सभी संभव छद्म राज्य हैं जो सीएसएस में एक लिंक हो सकते हैं:

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-over-act

— jansmolders86
स्रोत

2

मुझे लिंक नहीं चाहिए, मुझे बटन की आवश्यकता है, विशेष रूप से क्योंकि मोबाइल उपकरणों में होवर एक बदसूरत गड़बड़ करता है। साभार

— मल्टीमीडियाएक्सपी

उस मामले में जोड़ें मैं बटन को पूरी तरह से स्टाइल करूंगा। सीमा जोड़कर: 0; आप बटन के चारों ओर बेजल खो देते हैं और आपके पास जो समस्या है।

— jansmolders86

@ jansmolders86 क्या आप जानते हैं कि css में इमेज या बटन के लिए माउसओवर, mouseleave, mousedown, mouseup चयनकर्ता है?

— एनजी

@ J.Fun वास्तव में नहीं, आप ओवर / लीव के लिए होवर स्टेट का उपयोग करके वांछित प्रभाव प्राप्त करने का प्रयास कर सकते हैं और: डाउन / अप के लिए सक्रिय। लेकिन आप जावास्क्रिप्ट के बिना दोनों के बीच अंतर नहीं कर सकते।

— jansmolders86

50

मुझे पता चला कि यह एक घटिया घटना की तरह व्यवहार करता है:

button:active:hover {}

— shawn98ag
स्रोत

33

प्रो-टिप नोट: किसी कारण से, सीएसएस सिंटैक्सप्रभावी होने केलिए उसी तत्व के बाद:active स्निपेट कीआवश्यकता होती है:hover

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

— woohooGuy
स्रोत

2

सीएसएस का मूल्यांकन क्रम में किया जाता है ताकि यह समझ में आए; एक तत्व :activeइससे पहले नहीं बन सकता है :hover।

— TheZone

2

इसके अलावा, काम करने के लिए इसके :activeबाद होना चाहिए :focus। यह इंगित करने के लिए धन्यवाद, मैं वास्तव में अपने सिर को खरोंच रहा था कि मेरे सीएसएस पर कोई प्रभाव क्यों नहीं पड़ रहा है!

— माइकल

1

@InZone बेशक यह बन सकता है: सक्रिय होने से पहले: hover'ed। आप इसे कीबोर्ड से सक्रिय कर सकते हैं, जो होवर नहीं करता है।

— एविव्स

2

मुझे हाल ही में पता चला है कि :active:focusसीएसएस में वही काम करता है जैसे :active:hoverकि आपको कस्टम सीएसएस लाइब्रेरी को ओवरराइड करने की आवश्यकता होती है, वे दोनों का उपयोग कर सकते हैं।

— Mees
स्रोत