Обробка події click на css

Більшість з Вас, прочитавши заголовок даної статті, скажуть, що обробка події click на CSS неможлива. Однак, це не зовсім так. І в даній статті я покажу, як можна обробити подія click з використанням тільки CSS.

Припустимо, у нас є якась вкладка, клікнувши мишкою по якій, має відкритися вміст цієї вкладки. Абсолютна більшість все це буде робити на jаvascript, але насправді, в даному випадку, подія click легко буде опрацьовано через CSS.

Відео: Mimic a "Click" Effect with Only CSS

Для початку самий звичайний HTML-код:

class="Tabs"gt; 
class="Content"gt;вміст 1 
 вкладка 1 
 
class="Tabs"gt; 
class="Content"gt;вміст 2 
 вкладка 2

Нічого незвичайного, хіба що назва вкладки розташоване нижче контенту, пізніше, Ви зрозумієте чому. А зараз CSS-код:

Відео: Вивчаємо jQuery | Урок №20 - Оброблювач подій

.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), То він не буде закриватися. А для того, щоб клікнувши по вкладці, наш курсор автоматично опинився б і на контенті, ми і розташували кнопку нижче контенту, а також зробили ще й поле зверху. Таким чином, клікнувши по назві вкладки, ми натискаємо і по контенту теж, тому після кліка ми можемо сміливо відпустити кнопку миші, і у нас продовжить "тримати" контент наведення курсору.

Відео: 08 :. jQuery. Де взяти? Змінюємо CSS властивості за допомогою jQuery

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

Поділися в соціальних мережах:

Схожі