CSS3 संक्रमण: JQuery का उपयोग किए बिना एक क्लिक विकल्प है?

Question

यह महान काम करता है:

<style type="text/css"> 
    div 
    { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 
    } 

    div:hover 
    { 
    width:300px; 
    } 
    </style> 

लेकिन किसी को भी इस क्लिक मंडराना के बजाय का उपयोग कर के लिए एक रास्ता के बारे में पता है? और JQuery शामिल नहीं है?

धन्यवाद!

Answer 1

आप इस प्रकार लिख सकते हैं:

सीएसएस

input{display:none} 
.ani 
    { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 
    display:block; 
    } 
input:checked + .ani{width:300px;} 

एचटीएमएल

<input type="checkbox" id="button"> 
<label class="ani" for="button"></label> 

यह http://jsfiddle.net/nMNJE/

Answer 2

आपके पास दो विकल्प हैं, एक जावास्क्रिप्ट का उपयोग कर रहा है और एक सीएसएस छद्म वर्ग "सक्रिय" का उपयोग कर रहा है। जावास्क्रिप्ट विधि पुराने ब्राउज़र पर समर्थित होगी, और यही वह है जो मैं अनुशंसा करता हूं। हालांकि, सीएसएस विधि का उपयोग करने के लिए बस div: hover to div: सक्रिय करें।

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

<script type="text/javascript"> 
function expand(){ 
    document.getElementById('id').style.width="300px"; 
} 
</script> 

सीएसएस:

<style type="text/css"> 
div#id 
{ 
width:100px; 
height:100px; 
background:red; 
transition:width 2s; 
-moz-transition:width 2s; /* Firefox 4 */ 
-webkit-transition:width 2s; /* Safari and Chrome */ 
-o-transition:width 2s; /* Opera */ 
} 
</style> 

HTML:

<div id="id" onClick="expand()"> 
    Div Content... 
</div> 

Answer 3

वहाँ सास का उपयोग कर, तो jQuery का उपयोग किए बिना क्लिक के लिए कोई सीएसएस चयनकर्ता है शायद आपका सर्वश्रेष्ठ दांव

$(document).ready(function(){ 
$('#DIV_ID').click(function(){ 
$(this).animate({width:'300px'},200); 
}); 
}); 

((अपने शीर्षक में प्लगइन लिंक शामिल करने के लिए मत भूलना !!))

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

Answer 4

असल में जावास्क्रिप्ट का उपयोग किए बिना एक क्लिक चयनकर्ता है। आप का उपयोग कर differente DOM तत्वों को प्रभावित कर सकते हैं: लक्ष्य छद्म वर्ग। यदि कोई तत्व एंकर लक्ष्य का गंतव्य है तो उसे प्राप्त होगा: लक्ष्य छद्म तत्व (क्लिक किए गए तत्व को प्रभावित करने के लिए बस आईडी को एंकर टैग के समान ही सेट करें)। https://jsfiddle.net/k86b81jv/