Вопрос по click, hover, transitions, css3 – Переходы CSS3: есть ли опция нажатия без использования JQuery?

13

Это прекрасно работает:

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

Спасибо!

Ваш Ответ

4   ответа
1

На самом деле есть селектор щелчков без использования javasccript. Вы можете влиять на разные элементы DOM, используя:target псевдо класс. Если элемент является пунктом назначения для привязки, он получит:target псевдоэлемент (чтобы повлиять на элемент, на который нажали, просто установите идентификатор, совпадающий с его тегом привязки).

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

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

Вот скрипка для игры:https://jsfiddle.net/k86b81jv/

1

нет селектора CSS для кликов без использования sass, поэтому использование 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>
3

У вас есть два варианта: один с использованием 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>
16

Вы можете написать так:

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/

Спасибо! Это довольно близко к тому, что я хочу! MeltingDog

Похожие вопросы