सीएसएस - एक div "क्लिक करने योग्य"

Question

मुझे यह जानना है कि मैं एक div क्लिक करने योग्य कैसे प्रदान कर सकता हूं (एक लिंक की तरह, छोटे हाथ के साथ जब मैं माउस के साथ जाता हूं)।

<div class="teamSelector">Some</div> 

इस jQuery के साथ

:

$('.teamSelector').click(function() { 
    // some functions 
}); 

चीयर्स

Answer 1

आप पहले से ही यह आपके उदाहरण में क्लिक करने योग्य बनाया है

मैं इस तरह कुछ तत्वों की है।

.teamSelector { cursor: pointer; } 

या jQuery के साथ जारी रखने: कर्सर संपत्ति के लिए

.click(function() { do something }).css("cursor", "pointer"); 

Here is डब्ल्यू 3 स्कूलों संदर्भ आप इसे "देखो" करने के लिए क्लिक करने योग्य चाहते हैं, तो आपको कुछ सीएसएस जोड़ सकते हैं।

Answer 2

क्या आप अभी नहीं जानते हैं, इसे एक लिंक बनाते हैं और इसे स्टाइल करते हैं? यह आसान और सुलभ होगा।

Answer 3

इसके लिए सीएसएस है:

.teamSelector 
{ 
    cursor: pointer 
} 

तुम भी हॉवर प्रभाव जोड़ सकते हैं, लेकिन मैं अगर यकीन नहीं है: सक्रिय पार ब्राउज़र काम करेंगे।

यदि आपको क्लिक करने योग्य होने की आवश्यकता है, तो आप button या a तत्व का उपयोग करके बेहतर तरीके से बंद कर सकते हैं और स्टाइलिंग कर सकते हैं। आप हमेशा जावास्क्रिप्ट के साथ डिफ़ॉल्ट कार्रवाई को रोक सकते हैं। इसका कारण यह है कि अभिगम्यता के लिए यह है कि स्क्रीन पाठकों वाले उपयोगकर्ता जानते हैं कि बातचीत करने के लिए कुछ है।

जोड़ने के लिए संपादित करें: जब आप किसी पृष्ठ के माध्यम से टैब करते हैं, तो आप स्पेस बार को click पर एक तत्व पर हिट कर सकते हैं। यह गैर-संवादात्मक तत्वों पर भी काम नहीं करेगा, इसलिए उस कार्यक्षमता का उपयोग करने वाला कोई भी व्यक्ति जो भी आप बना रहे हैं उसका उपयोग करने में सक्षम नहीं होगा।

Answer 4

इस सवाल का बहुत पुराना है लेकिन कुछ अतिरिक्त जरूरत:

यदि आप, आप एक div के बजाय बटन तत्व (आप अभी भी इसे block प्रदर्शित कर सकते हैं) को प्राथमिकता देनी चाहिए सूचक आधारित उपयोगकर्ता संपर्क के साथ घटक रैप करने के लिए चाहते हैं।

<button class="teamSelector" tabindex="1">Some</button> 

शैलियों: सूचक क्रॉस-ब्राउज़र:

.teamSelector{ 
    user-select: none; // this sets the element unselectable, unlike texts 
    cursor: pointer; // changes the client's cursor 
    touch-action: manipulation; // disables tap zoom delaying for acting like real button 
    display: block; // if you want to display as block element 
    background: transparent; //remove button style 
    border: 0; //remove button style 
}