Css клик на элемент: Обработка события click на CSS

Обработка события click на CSS

Основы Laravel

Пройдя курс, Вы узнаете:

— Как установить и настроить Laravel

— Всю необходимую базу по Laravel

— Как создавать несложные сайты на Laravel

Общая продолжительность курса 4.5 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Власть над собой — самая высшая власть; порабощение своими страстями — самое страшное рабство.

Сенека

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS

невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.

Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на JavaScript, но на самом деле, в данном случае, событие click легко обработается через CSS.

Для начала самый обычный HTML-код:

<div>
  <div>Содержимое 1</div>
  <div>Вкладка 1</div>
</div>
<div>
  <div>Содержимое 2</div>
  <div>Вкладка 2</div>
</div>

Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код:

.tabs {
  float: left; /* Все вкладки располагаем в одну строку */
  margin: 10px; /* Отступы вкладок друг от друга */
}
.content {
  display: none; /* Скрываем содержимое */
  padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */
  position: absolute; /* Чтобы содержимое не двигало элементы на странице */
}
. tabs:active .content {
  display: block; /* Когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
  display: block; /* Пока курсор наведён на контент, не закрываем его */
}

Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active, но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит «держать» контент наведение курсора.

Данный алгоритм можно использовать для простых вкладок, а также для выпадающих по клику меню. Теперь, надеюсь, Вы подобные задачи будете решать без использования JavaScript, что всегда хорошо.

• Создано 17.10.2012 07:38:03
• Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

:active — CSS | MDN

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

/*  Любой элемент <a>, который будет активирован */
a:active {
  color: red;
}

Псевдокласс :active чаще используется с элементами <a> и <button>, но может применяться и к другим элементам – например элементам форм.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.

Примечание:

В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Error: could not find syntax for this item

Активные ссылки

HTML

<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>

CSS

a:link { color: blue; }          /* Непосещённые ссылки */
a:visited { color: purple; }     /* Посещённые ссылки */
a:hover { background: yellow; }  /* Ссылки при наведении */
a:active { color: red; }         /* Активные ссылки */
p:active { background: #eee; }   /* Активные абзацы */

Результат

Активные элементы формы

HTML

<form>
  <label for="my-button">Моя кнопка: </label>
  <button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>

CSS

form :active {
  color: red;
}
form button {
  background: white;
}

Result

Спецификация	Статус	Комментарий
HTML Living Standard Определение ‘:active’ в этой спецификации.	Живой стандарт
Selectors Level 4 Определение ‘:active’ в этой спецификации.	Рабочий черновик	Без изменений
Selectors Level 3 Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 2 (Revision 1) Определение ‘:active’ в этой спецификации.	Рекомендация	Без изменений
CSS Level 1 Определение ‘:active’ в этой спецификации.	Рекомендация	Первоначальное определение

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Псевдоклассы, связанные с ссылками: :link, :visited и :hover.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 22 февр. 2023 г. by MDN contributors.

javascript. Есть ли css-эквивалент onclick из элемента html?

спросил 6 лет, 2 месяца назад

Изменено 6 лет, 2 месяца назад

Просмотрено 7к раз

В javascript вы можете легко выполнять события onclick непосредственно из элемента html:

 <дел>
 

Я знаю, что вы можете изменить стили css с помощью тега < style >, но мне интересно, сможете ли вы выполнить его аналогично приведенному ниже примеру:

• JavaScript
• HTML
• CSS

2

, если вы хотите сделать это исключительно через css , вы должны использовать :active или, может быть, : фокус :

 div: hover { цвет: красный; } /* наведение мыши */
div: активный { цвет: красный; } /* мышь вниз (это также вызывает фокус) */
ввод: фокус { цвет: красный; } /* получили фокус (клавишей Tab или мышью) */
/* для элемента : */
а: ссылка { цвет: красный; } /* непросмотренные ссылки */
a: посетил { цвет: красный; } /* посещенные ссылки */
 

Примечание: :active не остается постоянным после того, как пользователь отпускает кнопку мыши для элементов, которые не получают фокуса (например, div), но работает для таких элементов, как ввод текста или кнопки. есть обходной путь для этого называется «Взлом флажка» , где вы используете подключенную метку и ввод флажка, а также какой-либо другой элемент, которым вы пытаетесь управлять..

Кроме того, если вы хотите изменить класс CSS или встроенные стили, вы можете сделать следующее:

 < div>Нажми на меня

 element:focus {
 /* некоторый_CSS; */
}
 

 <скрипт>
функция change_css () {
 document.getElementById('change_css'). className='newClassName';
}

контент
 

 document.getElementById('change_css').className+=' newClassName';