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伪类“active”。旧版浏览器将支持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：

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

Answer 3

实际上没有使用javasccript的点击选择器。您可以使用：target 伪类来影响不同的DOM元素。如果一个元素是一个锚目标的目标，它将获得：target 伪元素（为了影响被点击的元素，只需将ID设置为与其锚标记相同）。

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

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

这是一个小提琴：https://jsfiddle.net/k86b81jv/

Answer 4

没有使用sass的点击没有css选择器，所以使用jquery可能是你最好的选择

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

CSS3 Transitions：有没有使用JQuery的点击选项？

4 个答案: