Появление блока при наведении css: Как сделать появление блока при наведении с помощью CSS? — Хабр Q&A

Как сделать плавное появление блока CSS свойствами?

Существует несколько способов. Зная определённые принципы работы с CSS3, можно реализовать плавное появление блока CSS свойствами, тем самым воплотив в жизнь массу креативных идей для сайта. Как вариант – сделать плавное появление элемента, возникающее после наведения указателя мышки на какой-либо элемент на странице. Другой пример – демонстрация элемента спустя заданный временной промежуток без использования скриптов.

Сначала давайте рассмотрим вариант плавного появления блока CSS с помощью свойств при наведении. Нам предстоит сделать следующие шаги.

1. Создаем два блока: один будет видимым и будет плавно возникать на странице, другой – будет скрытым.
   
2. Заполним стили оформления.
   
   Для скрытого блока указываем полную прозрачность, а также прописываем для него скорость перехода между состояниями элемента. Для этого нам нужны теги opacity:0 и transition: 2 s. Обратите внимание, скорость перехода состояния элемента мы задали 2 секунды.
3. Далее – самый важный шаг. Используя селектор .on-hover:hover+ .hidden-block, мы делаем так, чтобы при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. Элемент становится видимым, так как мы изменяем и прозрачность.
   

Важно: блок .hidden-block не располагается внутри .on-hover. Поэтому придётся использовать hover с +. Скрытый элемент в вашем случаи располагается внутри элемента, на который нужно навести курсор? Советуем обратиться к селектору .on-hover:hover+ .hidden-block.

Любуемся результатом.

Видимый

Скрытый

Теперь перейдём к плавному появление блока с помощью CSS с временной задержкой через использование правила @keyframes.

Хотите показывать элемент с некоторой задержкой? Тогда действуйте по этой схеме:

1. Создайте прозрачный по умолчанию блок.
   
2. Пропишите свойства оформления элемента, прозрачность и скорость перехода.
   
   Задайте свойство animation, в котором пропишите название анимации (show), её скорость (2 секунды) и число повторений (1). Указывая свойство animation-fill-mode со значением forwards, вы не допустите того, чтобы после выполнения анимации элемент принял первоначальное состояние. Он сохранит новый вид.
   Также зададим дополнительное свойство, которое отсрочит запуск анимации на 2 секунды (animation-delay).
3. Через правило @keyframes, задаём последовательность, с которой будет появляться блок.
   

Чтобы посмотреть результат данных действий, обновите страницу.

Плавное появление блока CSS

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

Оставляйте свои сообщения – будем рады ответить на них! Или заказывайте разработку сайта под ключ у нас!

Спойлер на CSS (скрытый блок, отображающийся при наведении)

 Наши веб страницы выглядят всегда для разных людей не однозначно! Здесь можно описать все фразой, сколько людей, столько и мнений. При этом ее кому-то кажется, что скажем страница перегружена картинками, контентом и тому подобным,  кому-то может не хватать мелочей.  Вот что делать в такой неоднозначной ситуации?
 Ответ весьма прост и он уже давно известен. Необходимо скрывать часть информации, а при необходимости, то есть если у пользователя возникнет желание узнать подробности в виде картинок или комментариев, отображать еще что-то дополнительно. Среди веб-мастеров, веб-верстальщиков такая дополнительная всплывающая информация называется спойлер.

Сразу скажу, что этот спойлер можно реализовать разными способами. Речь сейчас не идет об алгоритмах в разных языках, там тоже возможно инварианты, речь сейчас именно о выборе языка. Так я уже приводил подобный пример с JS (JavaScript), где при определенном событии, здесь уже не важно что, у нас появлялся дополнительный блок, то есть наш так называемый спойлер с той самой дополнительной информацией.

И приведенный пример вполне себе не плох, однако он не единичен! У него есть как свои плюсы, так и свои минусы. Что на счет плюсов, то он весьма универсален на события, то есть мы можем прикрутить любое событие, которое поддерживается JS, дабы наш скрипт с ним работал. Однако опять же, это же дополнительный скрипт, дополнительный сценарий и все в таком духе…

Что же, сегодняшний вариант будет для появляющегося блока на CSS, то есть блок будет становиться видимым при наведении на какой либо элемент курсора мышки. Если вы помните, то в операторах CSS это hover, то есть парить. зависать и т.д. Хотя у меня появляются сразу какие-то ассоциации с китайским кроссовером, но не об этом…

Итак, далее представляю вам пример на чистом CSS и приведу код. Все как всегда.

Пример 1

Смотреть код

Собственно если кратко дать комментарии, то вначале есть пару блоков, причем один в другом. При этом один из блоков со стилем не отображаться. Однако при наведении меняется его стиль на отображаться и он нам становиться видим. Никакой магии, никаких JS, все на чистом CSS. Минусом можно считать все же то, что нет фиксации спойлера в состоянии отображаться при разовом клике.

Пример 2

Второй пример отличается тем, что для первого случая при появлении спойлера он удерживается за счет стиля прописанного для появившегося блока (Содержание 1,) при наведении, а второй вариант (Вкладка 2) блока, предусматривает не наведение, а клик, то есть кликам и появляется спойлер.

Смотреть код

В целом это тоже самое, только здесь применяется либо оператор hover либо active.

Пример 3

Еще один пример пригодится в том случае, если вам надо кликнуть и что-то увидеть. Собственно так было и во втором примере, только отображаемая часть появлялась именно на момент клика, а дальше, как только кнопку отпускали, все пропадало. Здесь мне пришло в голову использование стиля для ссылок, когда после активации ссылки она меняет цвет шрифта. Если скажем первоначально он был белый, что собственно можно приравнять к невидимому, неотображаемому блоку, то после посещения ссылки, она становится другого цвета и ее видно, а значит видно контент. Здесь есть минусы. Первый, контент уже есть на странице и он занимает место. Второй, это по факту не скрытие контента, а использование свойств хамелеона, когда оно есть, но его не видно. Такое не любят поисковики. Еще один минус в том, что ссылка откроется и запомнится браузером как visited и потом при последующем посещении контент будет отображаться сразу, пока не сбросится кеш. В общем такое, но работает!

Смотреть код

CSS :hover Селектор

❮ Назад Справочник по селекторам CSS Далее ❯

Пример

Выбор и стиль ссылки при наведении на нее курсора:

a:hover {
  фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Селектор :hover используется для выбора элементов при наведении на них указателя мыши.

Совет: Селектор :hover можно использовать для всех элементов, а не только по ссылкам.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и :active селектор для оформления активной ссылки.

Примечание: :hover ДОЛЖЕН идти после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!

Версия:	CSS1

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:наведение	4,0	7,0	2,0	3. 1	9,6

Примечание: В IE должен быть объявлен

чтобы селектор :hover работал с другими элементами, кроме элемента .

---

Синтаксис CSS

:hover {
 объявления css ;
} Демонстрация

---

---

Дополнительные примеры

Пример

Выбор и стиль элемента

,

и

при наведении на него курсора:

p:hover, h2:hover, a:hover {
  background -цвет: желтый;
}

Попробуйте сами »

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a. ex1:hover, a.ex1:active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент