Изменить стиль блока при нажатии

Не знаю JavaScript вообще. Только CSS и HTML. Помогите написать код, пожалуйста. Допустим, у меня есть блок A

У него есть стиль #a {width:100px; height:100px; position:absolute (или relative, не суть); top:0px} При нажатии на этот блок нужно чтобы у него был top:100px; left:50px к примеру. Насколько мне известно, средствами CSS можно лишь сделать так, чтобы на время нажатия на этот блок он перемещался, а когда отпустить кнопку мыши - он встанет на свое место. Как сделать, чтобы при клике на этот блок он переместился, а при еще одном клике встал назад? Очень, очень и очень желательно без JavaScript, ибо я его пока что ВООБЩЕ не знаю, если возможно. Если невозможно, помогите написать скрипт-шаблон, и хотя бы отдаленно расскажите какая команда за что отвечает. Спасибо большое, надеюсь поможете)) UPD Возможно сделать так, чтобы при клике у него менялись свойства? Или при клике вместо id="a" у него становился id="a1" ? Это возможно?

Ответ

Уже тыщу раз отвечал на подобный вопрос: HTML

CSS #a { width:100px; height:100px; position:absolute; top:0; left: 0; border: 1px solid black; transition: all 0.5s; } .switchable input { display:none; } .switchable input:checked+#a { top:100px; left:50px } http://jsfiddle.net/oceog/sFEH4/ фокус в использовании :checked и следующего за ним div. ограничение способа - нельзя помещать в такой

никаких input