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

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

Описание

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

Нужно сделать.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; }

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

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено.

Обязательный атрибут

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .

Значение по умолчанию

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .

HTML5 IE Cr Op Sa Fx

Открыть в новом окне

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo . Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Обозначения

Пример

• История 1
• История 2

История 1

История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.

История 2

История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

В данном примере целевой элемент выделяется цветом фона.

Примечание

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.

Что такое: target?

h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } h1: target { font-size: 50px; text-decoration: underline; color: #37aee4; }

Добавим анимацию

Давайте оживим наш эффект и добавим немного анимации, например, миленький перехода для изменения цвета. Смотрите, как это работает .

h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } h1:target { font-size: 50px; text-decoration: underline; color: #37aee4; }

Управление нецелевыми объектами

Скажем, мы хотим изменить стили абзаца, который идет после выбранного заголовка.

Сделать это очень просто при помощи следующего кода. Смотрите демо .

h1: target + р { background: #f7f7f7; padding: 10px; }

Создание простого слайд-шоу при помощи CSS

Разработчики придумали тонны приложений с использованием псевдокласса : target . Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.

Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.

• One
• Two
• Three
• Four
• Five

Теперь добавим наши стили:

* { margin: 0px; padding: 0px; } #slideshow { margin: 50px auto; position: relative; width: 400px; } ul { list-style: none; } li { float: left; overflow: hidden; margin: 0 20px 0 0; } li a { color: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } li a:hover { color: #50b0df; } li img { position: absolute; top: 50px; left: 0; z-index: -1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } li img:target { z-index: 1; } li img:not(:target) { opacity: 0; }

Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.

Далее, установим z-index: -1 для всех изображений, а затем установите z-index: 1 для целевых изображений. Это приведёт к тому, что когда вы нажимаете на элемент списка, изображение изменяется. Чтобы сделать переход более плавным, мы установим значение непрозрачность для других изображений 0 .

Смотрите демонстрацию слайд-шоу на чистом CSS .

Кроссбраузерность

Псевдокласс : target является селектором CSS третьего уровня , это значит, что он поддерживается в практически любом браузере, за исключением (не за что не догадаетесь ) ... IE. Старый добрый ослик поддерживает CSS3-селекторы только в 9-ой и 10-ой версиях.

Как и любую другую проблемой отображения CSS3- селекторов в IE , это довольно легко исправить при помощи Selectivizr .

Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.

Заключение

Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор

:target -хороший тому пример. Только убедитесь, что вы не переборщили со стилями.

Ещё один интересный пример использования :target