Событие click на чистом CSS без :target

Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target. Но что если его нельзя использовать? Есть другой метод.

Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов :active и :hover. 

 

Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой:

<div class="wrapper">
	<div class="content">
		<li>Lorem ipsum dolor sit amet.</li>
		<li>Consectetur adipiscing elit.</li>
	</div>
	<div class="button">Кнопка</div>
</div>

Нужно сделать .content невидимым до тех пор, пока не нажата кнопка мыши на .wrapper. Для решения задачи установим для .content свойство display: none. Затем при нажатии кнопки мыши на .wrapper, будем включать для .content свойство display: block. Для чего установим для .wrapper:active .content свойство display: block. В таком состоянии .content будет видим только когда кнопка мыши нажата. Если ее отпустить,.content снова исчезнет. Для фиксации сделаем так, чтобы при нахождении курсора мыши над  .content, элементу присваивалось свойство display: block. То есть устанавливаем  для .content:hover свойство display: block. Код CSS будет иметь вид:

.content {
	display: none;
}

.wrapper:active .content {
	display: block;
}

.content:hover {
	display: block;
}

Остается только "причесать" внешний вид и придать ему наглядности:

.wrapper {
	position: relative;
}

.button {
	background: yellow;
	height: 20px;
	width: 150px;
}

.content {
	position: absolute;
	padding-top: 20px;
}

.content li {
	background: red;
}

Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/XTdgApDwe7s/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Событие click на чистом CSS без :target | | 2012-08-19 20:13:49 | | Статьи Web-мастеру | | Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target. Но что если его нельзя использовать? Есть другой метод.Посмотрите демонстрацию. Она | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: