Спочатку потрібно створити контейнер, який буде містити кнопку і блоки, що виводяться після натискання миші. Структура розмітки буде приблизно такою:
Потрібно зробити .content невидимим доти, поки не натиснута кнопка миші на .wrapper. Для вирішення завдання встановимо для .content властивість display: none. Потім при натисканні кнопки миші на .wrapper. будемо включати для .content властивість display: block. Для чого встановимо для .wrapper: active .content властивість display: block. В такому стані .content буде бачимо тільки коли кнопка миші натиснута. Якщо її відпустити. content знову зникне. Для фіксації зробимо так, щоб при знаходженні курсору миші над .content. елементу присвоювалося властивість display: block. Тобто встановлюємо для .content: hover властивість display: block. Код CSS буде мати вигляд:
Залишається тільки "причесати" зовнішній вигляд і надати йому наочності:
Текст кнопки в вищенаведеному коді буде мати жовтий фон, а виводиться після натискання кнопки миші інформація - червоний фон.
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
У ie працює "каряво"
А як саме? Річ хороша, хотілося б знати - якщо основне зберігається, то можна і потерпіти.
Блін, тільки що подивився. навіть у восьмому ослику не працює. Шкода, а така річ хороша.
Демка якась фейловая. У статті один код - в демке інший. В опері код зі статті нормально працює, а демка немає. Ну і це не подія click. Подія click відбувається при відпуску кнопки миші, а active при натисканні.
opera знову підкачала. мда..грустно - сумно.
Це просто знущання. Навіщо все це? Краще б більше цікавинок на jquery переводили і викладали.
mmZeroCool
В Опері таки не оре, але мене надихнуло зробити на одному чистому CSS і за своїм (без transition-delay і все на div-ах). Мало того сей приклад в FireFox теж працює інакше ніж в Chrome. Але все одно спасибі). -Ой, та мало того по оригінально посиланням (не полінувався грузануть оригінал) так само все криво працює, так що питання знімається. P.S. До речі, 3-и рази Регал на сайті, змогло надіслати підтвердження тільки на gmail-ю пошту. хм
Коротше на власних експериментах (на тлі цього прикладу)))); Прозрів від відмінності роботи: active аж до IE9 vs FireFox, Opera, Chrome (в них все як завжди норм)
wandit
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!