CSS3 Übergänge: Gibt es eine Option beim Klicken ohne JQuery zu verwenden?

Question

Dies funktioniert gut:

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

Aber jemand eine Möglichkeit kennt dies mit Klick statt schweben zu tun? Und nicht mit JQuery?

Danke!

Answer 1

Sie so schreiben können:

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> 

Überprüfen Sie diese http://jsfiddle.net/nMNJE/

Answer 2

Sie haben zwei Optionen, eine mit JavaScript und eine mit der CSS-Pseudoklasse "active". Die JavaScript-Methode wird auf älteren Browsern unterstützt, und das ist, was ich empfehlen würde. Um die CSS-Methode zu verwenden, ändern Sie einfach div: hover zu 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

es keine CSS-Selektor ist für Klicks ohne sass zu verwenden, so jquery verwenden ist wahrscheinlich die beste Wahl

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

((vergessen Sie nicht das Plugin Link in Ihrem Header !!) enthalten)

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

Answer 4

Eigentlich gibt es einen Klick-Selektor ohne javascript verwenden. Sie können verschiedene DOM-Elemente unter Verwendung der Pseudoklasse : target beeinflussen. Wenn ein Element das Ziel eines Ankerziels ist, erhält es das Pseudoelement : target (um das angeklickte Element zu beeinflussen, setzen Sie einfach die ID auf das gleiche wie das Anker-Tag).

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

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

Hier ist eine Geige zu spielen: https://jsfiddle.net/k86b81jv/