क्लिक करें

Question

पर क्लिक करने के बाद सीएसएस परिवर्तन बटन शैली मैं सोच रहा था कि क्लिक करने के बाद, सीएसएस में, बटन की शैली बदलने का कोई तरीका था, इसलिए element:active नहीं। धन्यवाद!

Answer 1

यदि आप एक शुद्ध सीएसएस विकल्प की तलाश में हैं, तो फोकस छद्म वर्ग का उपयोग करने का प्रयास करें।

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 

Answer 2

बटन के सक्रिय और फोकस तत्व को चुनकर केवल सीएसएस के साथ करना संभव है।

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

codepen देखें: http://codepen.io/fennefoss/pen/Bpqdqx

तुम भी एक सरल jQuery क्लिक समारोह जो पृष्ठभूमि रंग बदल जाता है लिख सकते हैं।

HTML:

<button class="js-click">Click me!</button> 

सीएसएस:

button { 
    background: none; 
} 

जावास्क्रिप्ट:

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

इस codepen चेक आउट: http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

क्या आपके के कोड है, लेकिन टन? यदि यह एक एक टैग है, तो आप ऐसा कर सकते हैं:

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}

<a href="#">A button</a>

या आप jQuery इस्तेमाल कर सकते हैं, जैसा कि नीचे क्लिक पर एक वर्ग को जोड़ने के लिए,:

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});

.button-clicked { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">Button</button>

Answer 4

यदि आपका बटन <a> तत्व होगा, तो आपका उपयोग कर सकते हैंचयनकर्ता।

आप फिर भी सीमित हैं, आप केवल बदल सकते हैं:

• रंग
• पृष्ठभूमि रंग
• सीमा-रंग (और इसके उप-गुणों)
• रूपरेखा रंग
• भरने और स्ट्रोक गुणों के रंग भागों

मेरे पास नहीं है this article about revisiting the :visited पढ़ें लेकिन शायद कुछ स्मार्ट लोगों को इसे हैक करने के अधिक तरीके मिल गए हैं। link, hover, active, focused और visited:

Answer 5

प्रत्येक कड़ी पांच अलग-अलग राज्यों की है।

Link सामान्य उपस्थिति, hover जब आप माउस से अधिक, active राज्य जब क्लिक करते ही है, focused सक्रिय अनुसरण करता है और visited जब आप हाल ही में क्लिक किया लिंक unfocus राज्य आप अंत है है।

मैं आप या तो focus या visited पर एक अलग शैली हासिल करना चाहते हैं अनुमान लगा रहा हूँ, तो आप निम्न सीएसएस जोड़ सकते हैं: अपने सीएसएस में

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

एक आदेश की सिफारिश की किसी भी परेशानी पैदा नहीं करने के लिए निम्न है :

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

आप अपने वेब ब्राउज़र के डेवलपर टूल का उपयोग कर सकते हैं इस प्रकार का तत्व के राज्यों के लिए मजबूर करने (CHROME-> डेवलपर टूल/निरीक्षण तत्व> style-> फिल्टर: एचओवी): Force state in Chrome Developer Tools