Css появление элементов при наведении

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

В этой статье хочу вам показать два, очень интересных приема работы с CSS3, которые дают возможность сделать плавное появление блока CSS свойствами. Используя данную возможность можно сделать достаточно много интересных вещей для своего сайта. Например, мы можем сделать плавное появление элемента при наведении на какой-либо элемент на странице, или показать элемент через определенный интервал времени не используя при этом никаких скриптов!

Навигация по статье:

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

В ситуации, когда нам нужно показать блок при наведении, мы должны сделать следующее:

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

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

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

Плавное появление блока CSS с задержкой по времени

Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.

Подробно об использовании данного правила вы можете почитать в этой статье:
Создаём CSS-анимацию без плагинов

В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:

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

Источник

Появление блока при наведении с помощью CSS

Доброго времени суток. 🙂
Сегодня хочу показать Вам два способа как можно организовать появление блока при наведении на другой блок, используя только CSS.

Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака play при наведении на постер фильма.

Второй способ по сути такой же, но в нем второй блок появляется в виде выноски.
И так приступим.

Способ номер один

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

1. HTML разметка

Тут все просто, нужно внутри одного div-а разместить второй как в примере ниже

2. Стили CSS

Тут тоже нет ничего сложного, просто прописываем стили для блоков. Для первого задаем размеры и position:relative
для второго position:absolute и позиционирование left, bottom, right, top, также свойство display:none.

.holder < position:relative; width:300px; height:400px; background:#ff6600; margin:100px auto; >.block < position:absolute; left:0; bottom:0; right:0; top:0; background:rgba(255,255,255, 0.7); padding:5px; display:none; >.holder:hover .block

Способ номер два

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

1. HTML разметка

2. Стили CSS

.poster < position:relative; margin:100px auto; background:#ff6600; height:200px; width:150px; >.descr < display:none; margin-left:-350px; padding:10px; margin-top:17px; background:#f3f3f3; height:200px; -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3); box-shadow:0 5px 5px rgba(0,0,0,0.3); >.poster:hover .descr

Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.

На этом Все, спасибо за внимание 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂

Доброго вам дня. На всіх своїх темах, які я роблю для замовників я встановлюю свої кнопки шаринга в соціальних мережах. Вони мають різну кількість кнопок, але найчастіше я використовую стандартний…

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

Доброго вам дня. Сьогодні буде простенька стаття про те, як зробити просте виїжджаюче меню без використання скриптів, тобто на чистому html + CSS. Даний урок буде корисний тим, хто верстає…

Доброго времени суток Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто…

© 2013 — 2023 гг. Gnatkovsky.com.ua — Дизайн і розробка сайтів. Всі права захищені. Будь-яке використання матеріалів допускається лише з зазначенням активного посилання на джерело. Повне копіювання інформації, крадіжка контенту — ЗАБОРОНЕНО. У разі виявлення сайту використовує повністю скопійований матеріал, будуть вжиті заходи.

Источник

Как сделать плавное появление блока 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. Но если вдруг возникли дополнительные вопросы или комментарии, вы можете написать нам с помощью формы обратной связи. Оставляйте свои сообщения – будем рады ответить на них! Или заказывайте разработку сайта под ключ у нас!

Еще ответы по теме:

Источник

Как сделать появление одного элемента при наведении на другой элемент?

Класс .hover-info изначально скрыт (display: none). Его нужно показывать при наведении именно на картинку, тоесть при наведении на область изображения (), а не на область списка (li).

Возможно ли так сделать без js ?

@DeLaVega ) я про то, что менять структуру html это не разумно, если можно ее сохранить применив js. и я опять повторю — это частный случай.

к тому же проще было сделать применение стилей при наведении на li, в таком случае даже при ховере на срабатывали бы стили codepen.io/iusfof/pen/zpBwc

@iusfof если не секрет, в чем заключается костыльность метода и чем js менее костыльный? Писать теперь такие минифункции ради каждого хавера? Грамотный разработчик заранее продумает структуру html с учетом всего, что можно организовать без js. И если это не было сделано сразу, то первым делом попробует поменять структуру, и только если это невозможно уже сделать, то применит js.

@iiil
— допустим может случится так, что будет готовая хтмл структура, которую поменять нельзя это раз (причина по которой я предложил js).
— потом может случится так, что элементы будут находится на разных уровнях это два (причина по которой я считаю данный вариант костылем, хотя костылем называть некорректно, он бы просто не сработал, если бы структура была другой).
— используя js можно организовать взаимодействие элементов которые находятся хоть в противоположных концах страницы это три.
— я описал куда более разумный вариант css без изменения структуры html — codepen.io/iusfof/pen/zpBwc — это четыре.

«Грамотный разработчик заранее продумает структуру html с учетом всего, что можно организовать без js» — ну а в данном случае человек не продумал это заранее и мое предложение было исходя из того, что структуру поменять нельзя, хотя мое предложение в свете 4-го пункта становится сомнительным.

сам я так же предпочел бы не использовать js, если это было бы возможно

Источник