मेरे पास एक छवि तत्व है जिसे मैं क्लिक पर बदलना चाहता हूं।
<img id="btnLeft">यह काम:
#btnLeft:hover {
width:70px;
height:74px;
}लेकिन मुझे क्या चाहिए:
#btnLeft:onclick {
width:70px;
height:74px;
}लेकिन, यह काम नहीं करता है, जाहिर है। क्या onclickसीएसएस में व्यवहार करना संभव है (यानी जावास्क्रिप्ट का उपयोग किए बिना)?
:targetचयनकर्ताओं के लिए नया नहीं है। यह चयनकर्ताओं 3 के बाद से उपलब्ध है, जो लेखन के समय एक वर्ष के लिए पहले से ही एक सिफारिश थी।
जवाबों:
निकटतम आपको मिलेगा :active:
#btnLeft:active {
width: 70px;
height: 74px;
}हालाँकि यह केवल उस शैली को लागू करेगा जब माउस बटन को नीचे रखा जाता है। किसी शैली को लागू करने और इसे ऑनक्लिक रखने का एकमात्र तरीका जावास्क्रिप्ट का एक सा उपयोग करना है।
सबसे अच्छा तरीका (वास्तव में एकमात्र तरीका *) केवल सीएसएस का उपयोग करके एक वास्तविक क्लिक ईवेंट का अनुकरण करना है (केवल एक तत्व पर मँडरा या एक तत्व को सक्रिय करने के लिए, जहां आपके पास माउसअप नहीं है ) चेकबॉक्स हैक का उपयोग करना है। यह लेबल की विशेषता के माध्यम labelसे एक <input type="checkbox">तत्व को संलग्न करके काम करता है for=""।
इस सुविधा में व्यापक ब्राउज़र समर्थन है ( :checkedछद्म वर्ग IE9 + है)।
एक करने के लिए एक ही मूल्य लागू <input>की आईडी विशेषता और एक साथ <label>की for=""विशेषता है, और आप फिर से शैली के लिए ब्राउज़र के साथ क्लिक पर लेबल बता सकते हैं :checkedछद्म वर्ग, वास्तव करने के लिए धन्यवाद कि एक लेबल पर क्लिक जाँच करेगा और सही का निशान हटाएँ "संबद्ध" <input type="checkbox">।
* आप के माध्यम से एक "चयनित" घटना अनुकरण कर सकते हैं :activeया :focus(एक बटन सामान्य रूप से है कि उदाहरण के लिए IE7 + में छद्म वर्ग 50pxचौड़ा, आप इसकी चौड़ाई जबकि बदल सकते हैं active: #btnControl:active { width: 75px; }), लेकिन उन सच नहीं कर रहे हैं घटनाओं "क्लिक"। वे पूरे समय "लाइव" होते हैं जब तत्व का चयन किया जाता है (जैसे कि Tabआपके कीबोर्ड के साथ बिंग), जो कि एक सच्चे क्लिक इवेंट से थोड़ा अलग होता है, जो आमतौर पर - पर कार्रवाई करता है mouseUp।
यहाँ मैंने अपने मार्कअप में इनपुट के ठीक बाद लेबल पोस्ट किया है। यह इतना है कि मैं केवल उस लेबल का चयन करने के लिए आसन्न भाई चयनकर्ता ( +कुंजी) का उपयोग कर सकता हूं जो तुरंत मेरे #demoचेकबॉक्स का अनुसरण करता है । चूँकि :checkedछद्म वर्ग चेकबॉक्स पर लागू होता है, #demo:checked + labelकेवल चेकबॉक्स की जाँच होने पर ही लागू होगा।
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>इसके साथ ही किया जा रहा है ने कहा, है कुछ बुरी खबर। क्योंकि एक लेबल एक समय में केवल एक फॉर्म नियंत्रण से जुड़ा हो सकता है , इसका मतलब है कि आप केवल <label></label>टैग के अंदर एक बटन नहीं छोड़ सकते हैं और इसे एक दिन कह सकते हैं। हालाँकि, हम लेबल देखने के लिए कुछ सीएसएस का उपयोग कर सकते हैं और एचटीएमएल बटन कैसे दिखता है और व्यवहार करते हैं, यह काफी करीब से व्यवहार करता है।
इस डेमो में अधिकांश CSS लेबल तत्व को स्टाइल करने के लिए है। यदि आपको वास्तव में एक बटन की आवश्यकता नहीं है , और कोई भी पुराना तत्व पर्याप्त होगा, तो आप इस डेमो में लगभग सभी शैलियों को हटा सकते हैं, ऊपर मेरे दूसरे डेमो के समान।
तुम भी, पर ध्यान देंगे मैं वहाँ में एक उपसर्ग संपत्ति है -moz-outline-radius। कुछ समय पहले, मोज़िला ने फ़ायरफ़ॉक्स में इस भयानक गैर-विशिष्ट संपत्ति को जोड़ा, लेकिन वेबकीट के लोगों ने फैसला किया कि वे इसे दुर्भाग्य से जोड़ने नहीं जा रहे हैं । इसलिए सीएसएस की उस पंक्ति पर विचार करें जो फ़ायरफ़ॉक्स का उपयोग करने वाले लोगों के लिए एक प्रगतिशील वृद्धि है।
:checked।
आप :targetक्लिक इवेंट पर नकल करने के लिए छद्म वर्ग का उपयोग कर सकते हैं , मैं आपको एक उदाहरण देता हूं।
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>यहां बताया गया है कि यह कैसा दिखता है: http://jsfiddle.net/TYhnb/
ध्यान देने वाली एक बात, यह केवल हाइपरलिंक तक सीमित है, इसलिए यदि आपको हाइपरलिंक के अलावा अन्य उपयोग करने की आवश्यकता है, जैसे कि एक बटन, तो आप इसे थोड़ा हैक कर सकते हैं, जैसे कि बटन की तरह दिखने के लिए हाइपरलिंक को स्टाइल करना।
यदि आप तत्व देते हैं tabindexतो आप :focusएक क्लिक अनुकरण करने के लिए छद्म वर्ग का उपयोग कर सकते हैं।
एचटीएमएल
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />सीएसएस
#btnLeft:focus{
width:70px;
height:74px;
}tabindex=-1आइटम का उपयोग करते हैं तब भी ध्यान देने योग्य होता है, लेकिन केवल माउस से, कीबोर्ड से नहीं, जो इस मामले में बेहतर है। outline:0जब आप ध्यान केंद्रित करते हैं तो नीली सीमा को हटाने के लिए एक शैली का उपयोग भी कर सकते हैं
संपादित करें: इससे पहले कि वह क्या चाहता था, ओपी ने स्पष्ट किया। निम्नलिखित onclick के javascripts के समान एक onclick के लिए है, न कि :activeछद्म वर्ग के लिए।
यह केवल जावास्क्रिप्ट या चेकबॉक्स हैक के साथ प्राप्त किया जा सकता है
चेकबॉक्स हैक अनिवार्य रूप से आपको एक लेबल पर क्लिक करने के लिए मिलता है, वह चेकबॉक्स "चेक" करता है, जिससे आप लेबल को अपनी इच्छानुसार स्टाइल कर सकते हैं।
idउन्हें एक साथ बाँधने के लिए विशेषताओं का उपयोग न करना पड़े।
टायलरएच ने वास्तव में अच्छा उत्तर दिया, और मुझे बस उस अंतिम बटन संस्करण को अपडेट देना था।
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 30px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:30px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>हैक () के बिना शुद्ध सीएसएस समाधान के बारे में कैसे?
.page {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #121519;
color: whitesmoke;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.arrow {
cursor: pointer;
transition: filter 0.3s ease 0.3s;
}
.arrow:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}<body class="page">
<div class="controls">
<div class="arrow">
<img src="https://i.imgur.com/JGUoNfS.png" />
</div>
</div>
</body>@ टायलर के पास एक शानदार प्रतिक्रिया है लेकिन इसका एक सुंदर जटिल समाधान है। मेरे पास आप में से उन लोगों के लिए एक समाधान है जो अतिरिक्त तत्वों के एक समूह के बिना शुद्ध सीएसएस के साथ एक सरल "ऑनक्लिक" प्रभाव चाहते हैं।
हम बस सीएसएस संक्रमण का उपयोग करेंगे। आप शायद एनिमेशन के साथ भी ऐसा ही कर सकते हैं।
ट्रिक को ट्रांस्फ़ॉर्म के लिए देरी को बदलना है ताकि उपयोगकर्ता क्लिक करने पर चले।
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}यहां मैं "क्लिक की गई" क्लास को जोड़ता हूं ताकि जावास्क्रिप्ट को भी प्रभाव प्रदान कर सके, अगर इसकी आवश्यकता है। मैं 0px ड्रॉप-शैडो फ़िल्टर का उपयोग करता हूं क्योंकि यह मेरे मामले के लिए दिए गए पारदर्शी ग्राफिक ब्लू को इस तरह उजागर करेगा।
मेरे पास यहाँ 0s पर एक फ़िल्टर है ताकि यह प्रभावी न हो। जब प्रभाव जारी हो जाता है तो मैं विलंब के साथ संक्रमण जोड़ सकता हूं ताकि यह एक अच्छा "क्लिक" प्रभाव प्रदान करे।
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}यह मुझे इसे सेट करने की अनुमति देता है ताकि जब उपयोगकर्ता बटन पर क्लिक करे, तो यह नीले रंग को हाइलाइट करता है फिर धीरे से बाहर निकलता है (आप निश्चित रूप से, अन्य प्रभावों का भी उपयोग कर सकते हैं)।
जब आप इस अर्थ में यहां सीमित हैं कि हाइलाइट करने के लिए एनीमेशन तुरंत है, यह अभी भी वांछित प्रभाव प्रदान करता है। आप संभवत: इस चाल का उपयोग एनीमेशन के साथ एक समग्र संक्रमण का उत्पादन करने के लिए कर सकते हैं।
ठीक है, यह शायद एक पुरानी पोस्ट है ... लेकिन Google में पहली बार परिणाम आया था और इस पर अपना खुद का मिश्रण बनाने का फैसला किया था।
सबसे पहले मैं का उपयोग करेगा
इसका कारण यह है कि यह उदाहरण के लिए अच्छी तरह से काम करता है, जो मैं दिखा रहा हूं, अगर कोई माउस डाउन टाइप इवेंट चाहता है तो सक्रिय का उपयोग करें
HTML कोड:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>सीएसएस कोड:
/* Change Button Size/Border/BG Color And Align To Middle */
.mdT {
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); }JS FIDDLE लिंक: http://jsfiddle.net/00wwkjux/
इसलिए मैं इसे एक पुराने धागे में पोस्ट कर रहा हूं, अच्छी तरह से क्योंकि यहां के उदाहरण अलग-अलग हैं और मैंने एक समुदाय को वापस प्रदान करने के लिए सोचा जो एक काम करने वाला उदाहरण है।
जैसा कि पहले से ही थ्रेड निर्माता द्वारा उत्तर दिया गया है, वे केवल क्लिक इवेंट के दौरान प्रभाव को समाप्त करना चाहते हैं। अब जबकि यह उस जरूरत के लिए सटीक नहीं है, इसके करीब। माउस नीचे होने पर सक्रिय इच्छाशक्ति चेतन होगी और कोई भी परिवर्तन जिसे आपको अंतिम रूप से करना होगा, उसे जावास्क्रिप्ट के साथ करने की आवश्यकता है।
चेतावनी! विशेष रूप से सरल जवाब नीचे! :)
आपके पास वास्तव में एक परिवर्तन हो सकता है (जैसे कि एक ब्लॉक / पॉपअप जो दिखाई देता है और केवल एक क्लिक के बाद दिखाई देता है) CSS (और चेकबॉक्स हैक का उपयोग किए बिना , यहां तक कि दावे के कई (अन्यथा सही) उत्तर क्या है, कब तक जैसा कि आपको केवल हॉवर के दौरान दृढ़ता की आवश्यकता होती है।
तो Bojangles और TylerH के उत्तरों पर एक नज़र डालें, यदि वे आपके लिए काम करते हैं, लेकिन यदि आप एक सरल और CSS ही उत्तर चाहते हैं, तो क्लिक होने के बाद एक ब्लॉक दिखाई देगा (और फॉलोअप क्लिक के साथ ब्लॉक गायब हो सकता है), तो इसका समाधान देखें।
मेरे पास एक ऐसी ही स्थिति थी, मुझे onClick के साथ एक पॉपअप div की आवश्यकता थी जहां मैं कोई JS नहीं जोड़ सकता या मार्कअप / एचटीएमएल (वास्तव में CSS समाधान) को बदल सकता हूं और यह कुछ कैविटीज़ के साथ संभव है। आप का उपयोग नहीं कर सकते हैं: लक्ष्य चाल है कि एक अच्छा पॉपअप बना सकते हैं जब तक आप HTML (एक 'आईडी' जोड़ने के लिए) बदल सकते हैं ताकि बाहर था।
मेरे मामले में पॉपअप div दूसरे div के अंदर समाहित था, और मैं चाहता था कि पॉपअप दूसरे div के ऊपर दिखाई दे, और यह सक्रिय और: होवर के संयोजन का उपयोग करके किया जा सकता है:
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
display: block;
}
/* General settings for popup */
.info {
position: absolute;
top: -5;
display: none;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}उदाहरण (और साथ ही एक ऐसा जो पॉपअप पर क्लिक करके उसे गायब कर देता है):
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
मैंने नीचे एक कोड स्निपेट उदाहरण भी डाला है, लेकिन स्टैकओवरफ्लो सैंडबॉक्स में स्थिति अजीब है, इसलिए मुझे इनरवियर के बाद 'क्लिक हियर' टेक्स्ट डालना था, जिसकी सामान्य रूप से आवश्यकता नहीं होती है।
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { visibility: visible; }
/* And hold by staying visible on hover */
.info:hover {
visibility: visible;
}
/* General settings for popup */
.info {
position: absolute;
top: -10;
visibility: hidden;
z-index: 100;
background-color: white;
box-shadow: 5px 5px 2px #aaa;
border: 1px solid grey;
padding: 8px;
width: 220px;
height: 200px;
}
/* If we want clicking on the popup to close, use this */
.info:active {
visibility: hidden; /* Doesn't work because DCEvent is :active as well */
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}<p />
<div class="clickToShowInfo">
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
Click here to show info
</div>
<p />मेरे पास माउस होवर और माउस क्लिक के लिए निम्न कोड है और यह काम करता है:
//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
text-align:center;
vertical-align:middle;
height: 70%;
width: 80%;
top:auto;
left: 10%;
}और जब आप उस पर क्लिक करते हैं तो यह कोड छवि को छुपा देता है:
.thumbnail:active span {
visibility: hidden;
}मुझे एक तत्व के साथ एक समस्या थी जो होवर पर लाल रंग की होनी चाहिए और होवर होने पर क्लिक पर BLUE हो। उदाहरण के लिए आपको सीएसएस के साथ इसे प्राप्त करने के लिए:
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>मैं कुछ समय तक संघर्ष करता रहा जब तक मुझे पता नहीं चला कि सीएसएस चयनकर्ताओं के आदेश से मुझे समस्या हो रही थी। समस्या यह थी कि मैंने स्थानों को स्विच किया और सक्रिय चयनकर्ता काम नहीं कर रहा था। तब मुझे पता चला कि :hoverपहले और फिर जाने के लिए :active।
आप का उपयोग कर सकते हैं: लक्ष्य
सामान्य लक्ष्य के लिए
: लक्ष्य
या वर्ग नाम से फ़िल्टर करें
.classname: लक्ष्य
या आईडी नाम से फ़िल्टर करें
#idname: लक्ष्य
<style>
#id01:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.msg{
display:none;
}
.close{
color:white;
width: 2rem;
height: 2rem;
background-color: black;
text-align:center;
margin:20px;
}
</style>
<a href="#id01">Open</a>
<div id="id01" class="msg">
<a href="" class="close">×</a>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>:targetपहले से ही पोस्ट किया गया है, इसलिए एक और की आवश्यकता नहीं है। इसके अलावा, प्रश्नकर्ता अन्य तत्वों को दिखाने / छिपाने के लिए "ऑनक्लिक" प्रभाव का उपयोग करने के लिए कहता है।
:activeमाउस नीचे होने पर काम करता है। आप जो करने की कोशिश कर रहे हैं, उसके आधार पर, आप CSS4 के छद्म वर्ग का उपयोग करके इसे बनाने में सक्षम हो सकते हैं:target।