Chuyển tiếp CSS3: có tùy chọn nhấp chuột không sử dụng JQuery không?

Question

này hoạt động tuyệt vời:

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

Nhưng không ai biết một cách để làm điều này sử dụng nhấp chuột thay vì di chuột? Và không liên quan đến JQuery?

Cảm ơn!

Answer 1

Bạn có thể viết như thế này:

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> 

Kiểm tra điều này http://jsfiddle.net/nMNJE/

Answer 2

Bạn có hai tùy chọn, một tùy chọn sử dụng javascript và một tùy chọn bằng cách sử dụng lớp CSS giả "hoạt động". Phương thức javascript sẽ được hỗ trợ trên các trình duyệt cũ hơn và là những gì tôi muốn giới thiệu. Tuy nhiên, để sử dụng phương thức CSS, chỉ cần thay đổi div: hover thành 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

không có selector css cho các nhấp chuột mà không cần sử dụng sass, vì vậy sử dụng jquery có lẽ là lựa chọn tốt nhất của bạn

$(document).ready(function(){ 
$('#DIV_ID').click(function(){ 
$(this).animate({width:'300px'},200); 
}); 
}); 

((đừng quên để bao gồm các liên kết plugin trong tiêu đề của bạn !!))

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

Answer 4

Thực ra có trình chọn nhấp chuột mà không sử dụng javasccript. Bạn có thể ảnh hưởng đến các phần tử DOM khác nhau bằng cách sử dụng : nhắm mục tiêu lớp giả. Nếu phần tử là đích của một mục tiêu neo, nó sẽ nhận được : mục tiêu giả phần tử giả (để tác động đến phần tử được nhấp chỉ cần đặt ID giống như thẻ neo của nó).

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

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

Đây là một fiddle để chơi với: https://jsfiddle.net/k86b81jv/