CSS3转换：是否有一个点击选项而不使用JQuery？

这很好：

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

谢谢！

解决方法

你可以这样写：

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/