Появление блока при наведении 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%;
}

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

Пример

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

(как всплывающую подсказку):

div {
  отображение: нет;
}

span:hover + div {
  display: block;
}

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

Пример

Показать и скрыть «выпадающее» меню при наведении курсора мыши:

ul {
  display: inline;
  поля: 0;
  заполнение: 0;
}
ul li {отображение: встроенный блок;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {

  position: absolute;
  ширина: 200 пикселей;
  отображение: нет;
}
ул ли уль ли {
  background: #555;
  отображение: блок;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

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


Связанные страницы

CSS0 tutorial: CSS0 Links 9

Учебное пособие по CSS: Псевдоклассы CSS

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL

Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — стиль CSS создает поле наведения рядом с моим тегом a, а не над ним

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

Пытался поделиться полным HTML и CSS, но слишком большой, вопрос не публиковался. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, спасибо

 #навигационная панель {
  дисплей: гибкий;
  положение: липкое;
  сверху: 0;
  фон: #333;
  цвет: #fff;
  выравнивание содержимого: пробел между;
  z-индекс: 1;
  набивка: 1рем;
}

#навбар ул {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  стиль списка: нет;
}

#navbar ul li a {
  цвет: #fff;
  набивка: 0,75 бэр;
  запас: 0 0,25 бэр;
}

#navbar ul li a:hover {
  фон: #93cb52;
  радиус границы: 5px;
} 
 <навигация>
    

<диапазон> Край Бухгалтерская книга <ул>
  • Главная
  • Что
  • Кто
  • Контакты
    • html
    • css
    • hover

    Вы не за горами! Я думаю, ваша проблема в том, что вы не разместили текст ссылки внутри ссылки. Например, Home должен находиться внутри элемента a , а не справа от него. Таким образом,

  • Дом
  • должен стать
  • Дом
  • .

    Это приведет к появлению подчеркиваний в ссылках, которые можно отключить, добавив text-decoration: none для вашего селектора #navbar ul li a .

    Полный код будет выглядеть так:

     #navbar {
      дисплей: гибкий;
      положение: липкое;
      сверху: 0;
      фон: #333;
      цвет: #fff;
      выравнивание содержимого: пробел между;
      z-индекс: 1;
      набивка: 1рем;
    }
    #навбар ул {
      дисплей: гибкий;
      выравнивание элементов: по центру;
      стиль списка: нет;
    }
    #navbar ul li a {
      цвет: #fff;
      набивка: 0,75 бэр;
      запас: 0 0,25 бэр;
      текстовое оформление: нет;
    }
    #navbar ul li a:hover {
      фон: #93сб52;
      радиус границы: 5px;
    }
     
     <навигация>
        

    <диапазон> Край Бухгалтерская книга <ул>
  • Главная
  • Что
  • Кто
  • Контакт
  • Удачи!

    2

    Это просто опечатка в вашем коде.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *