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

前端之家收集整理的这篇文章主要介绍了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/

猜你在找的CSS相关文章