CSS3 过渡:是否有不使用 JQuery 的点击选项?

2022-01-22 00:00:00 hover click css transitions

这很好用:

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

But does anyone know of a way to do this using click instead of hover? And not involving 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/

相关文章