CSS3 Transitions：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

あなたはこのように書くことができます（（）!!あなたのヘッダー内のプラグインのリンクを含めることを忘れないでください）：

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> 

これを確認してくださいhttp://jsfiddle.net/nMNJE/

Answer 2

javascriptを使用するオプションとCSS擬似クラス「アクティブ」を使用するオプションの2つがあります。 javascriptメソッドは、古いブラウザでもサポートされ、私が推奨するものです。しかし、CSSメソッドを使用するにはdiv：hoverを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：クリックのためのCSSセレクタがそうjqueryのを使用して、SASSを使用せずに存在しない

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

Answer 3

あるおそらくあなたの最善の策

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

実際にはjavasccriptを使用しないクリックセレクタがあります。 ：疑似クラスを使用して、異なるDOMエレメントに影響を与えることができます。 要素がアンカーターゲットの宛先である場合、：targetという疑似要素を取得します（クリックされた要素に影響を与えるために、アンカータグと同じIDを設定するだけです）。ここで

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

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

はと遊ぶフィドルは次のとおりです。https://jsfiddle.net/k86b81jv/