Transizioni CSS3: esiste un'opzione su clic senza utilizzare JQuery?

Question

Questa grande opera:

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

Ma Qualcuno sa di un modo per farlo utilizzando click invece di hover? E non coinvolge JQuery?

Grazie!

Answer 1

Si può scrivere in questo modo:

CSS

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;} 

HTML

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

Controllare questo http://jsfiddle.net/nMNJE/

Answer 2

Si hanno due opzioni, una con javascript e l'altra con la pseudo-classe CSS "attiva". Il metodo javascript sarà supportato sui browser più vecchi, ed è quello che vorrei raccomandare. Tuttavia, per usare il metodo CSS basta cambiare div: hover su div: active.

Javascript:

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

CSS:

<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

non c'è selettore CSS per i clic senza usare sass, in modo da utilizzare jQuery è probabilmente la soluzione migliore

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

((non dimenticare di includere il link plug nell'intestazione !!))

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

Answer 4

In realtà c'è un click selector senza usare javasccript. Puoi influenzare gli elementi DOM differenti usando : target pseudo classe. Se un elemento è la destinazione di un bersaglio di ancoraggio, otterrà lo : target pseudoelemento (per influenzare l'elemento su cui è stato fatto clic basta impostare l'ID come il suo tag di ancoraggio).

<style> 
a { color:black; } 
a:target { color:red; } 
</style> 

<a id="elem" href="#elem">Click me</a> 

Ecco un violino con cui giocare: https://jsfiddle.net/k86b81jv/