Img hover: How To Create Image Hover Overlay Effects
15.03.2021
Разное
:hover — CSS | MDN
CSS псевдокласс :hover
срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link
, :visited
и :active
, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover
после правил :link
и :visited
до :active
, как определено LVHA-порядком: :link
— :visited
— :hover
— :active
.
Псевдокласс :hover
может применяться к любому псевдоэлементу.
Экспериментальная возможность
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Примечание: на сенсорных экранах :hover
проблемный или не работает. В зависимости от браузера, псевдокласс :hover
может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
:link:hover { outline: dotted red; } .foo:hover { background: gold; }
Выпадающее меню
С псевдоклассом :hover
вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:
div.menu-bar ul ul { display: none; } div.menu-bar li:hover > ul { display: block; }
применим к HTML структуре типа следующей:
<div> <ul> <li> <a href="example.html">Меню</a> <ul> <li> <a href="example.html">Ссылка</a> </li> <li> <a href="example.html">Подменю</a> <ul> <li> <a href="example.html">Подменю</a> <ul> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> </ul> </li> <li><a href="example.html">Ссылка</a></li> </ul> </li> </ul> </li> </ul> </div>
Смотрите наш полный пример выпадающего меню, основанный на CSS.
Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover
, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Примечание: Для аналогичного эффекта, но основанного на псевдоклассе:checked
(применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.
Specification |
---|
HTML Standard # selector-hover |
Selectors Level 4 # the-hover-pseudo |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
:hover ⚡️ HTML и CSS с примерами кода
Псевдокласс :hover
срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.
Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link
, :visited
и :active
, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover
до правил :link
и :visited
, но после
:active
, как определено в LVHA-порядке: :link
— :visited
— :hover
— :active
.
Псевдокласс :hover
может применяться к любому псевдоэлементу.
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис
/* Selects any <a> element when "hovered" */ a:hover { color: orange; }
Спецификации
- WHATWG HTML Living Standard
- Selectors Level 4
- Selectors Level 3
- CSS Level 2 (Revision 1)
Описание и примеры
Пример 1.

С псевдоклассом :hover
вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:
CSSHTML
div.menu-bar ul ul { display: none; } div.menu-bar li:hover > ul { display: block; }
<div> <ul> <li> <a href="example.html">Меню</a> <ul> <li> <a href="example.html">Ссылка</a> </li> <li> <a href="example.html" >Подменю</a > <ul> <li> <a href="example.html" >Подменю</a > <ul> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> <li><a href="example.html">Ссылка</a></li> </ul> </li> <li><a href="example.html">Ссылка</a></li> </ul> </li> </ul> </li> </ul> </div>
Смотрите полный пример выпадающего меню, основанный на CSS.
Пример 2. Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover
, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Пример 3
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hover</title> <style> a:link { color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ } a:hover { background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ } </style> </head> <body> <p><a href="1.html">Ссылка 1</a></p> <p><a href="2.html">Ссылка 2</a></p> <p><a href="3.html">Ссылка 3</a></p> </body> </html>
В данном примере псевдокласс :hover
применяется к ссылке (тегу <a>
), при этом меняется цвет ссылки и фона под ней. Результат:
Пример 4
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hover</title> <style> ul { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ } li ul { position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ } li a { display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc; /* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ } li a:hover { color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ } li:hover ul { /* При выделении пункта курсором мыши отображается подменю */ display: block; } .brd { border-bottom: 1px solid #ccc; /* Линия снизу */ } </style> </head> <body> <ul> <li> <a href="russian.html">Русская кухня</a> <ul> <li><a href="linkr1.html">Бефстроганов</a></li> <li><a href="linkr2.html">Гусь с яблоками</a></li> <li> <a href="linkr3.html">Крупеник новгородский</a> </li> <li> <a href="linkr4.html" >Раки по-русски</a > </li> </ul> </li> <li> <a href="ukrainian.html">Украинская кухня</a> <ul> <li><a href="linku1.html">Вареники</a></li> <li> <a href="linku2.html">Жаркое по-харьковски</a> </li> <li> <a href="linku3. html">Капустняк черниговский</a> </li> <li> <a href="linku4.html" >Потапцы с помидорами</a > </li> </ul> </li> <li> <a href="caucasus.html">Кавказская кухня</a> <ul> <li><a href="linkc1.html">Суп-харчо</a></li> <li><a href="linkc2.html">Лилибдж</a></li> <li><a href="linkc3.html">Чихиртма</a></li> <li> <a href="linkc4.html">Шашлык</a> </li> </ul> </li> <li> <a href="asia.html" >Кухня Средней Азии</a > </li> </ul> </body> </html>
В данном примере псевдокласс :hover
добавляется к элементу списка (тег <li>
) для создания двухуровневого меню. Результат:
См. также
:link
:visited
:active
Ссылки
- Псевдо-класс
:hover
MDN (рус.)
CSS эффекты наведения изображения, эффекты наведения изображения, непрозрачность наведения, наложение наведения и изменение изображения наведения
Эффекты наведения CSS дают нам возможность анимировать изменения значения свойства CSS. В следующем уроке мы собираемся продолжить это с различными видами эффектов, специально созданных для использования с изображениями. Однако эти эффекты могут сделать ваш сайт более динамичным и живым. Все эффекты, которые мы будем использовать сегодня, используют код, поддерживаемый современными браузерами.
Создание эффекта ролловера (Hover Effects)
В следующем коде показано, как отобразить эффект наведения на Box Shadow.
Наведите курсор сюда
Исходный код
Наведите мышку сюда
Эффекты наведения изображения (переворачивание изображений)
Следующий код CSS показывает, как представить эффекты наведения изображения.
Наведите указатель мыши на изображение.
Исходный код
Подробнее о CSS Shadow… Примеры CSS Shadow
Непрозрачность/прозрачность изображения CSS
Непрозрачность противоположна прозрачности, не пропускает свет. Вы можете создавать прозрачные изображения в CSS с помощью свойства opacity.
CSS Эффект затухания изображения
Эффект размытия изображения
изображение { непрозрачность: 0,3; }Подробнее о …. Как сделать фоновые изображения прозрачными
Создание прозрачных/непрозрачных изображений — эффект наведения мыши
Следующая программа CSS показывает, как реализовать непрозрачность изображения при наведении указателя мыши. Когда вы наводите курсор мыши на изображение, вы можете видеть, что изображение исчезает.
Непрозрачность изображения при наведении
Наведите указатель мыши на изображение.
Исходный код
Наложение текста на изображение при наведении
Наложение изображений друг на друга — отличный способ придать изображению новый вид. Здесь код CSS, отображающий текст на изображении при наведении курсора мыши
Наведите указатель мыши на изображение.
Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.
Исходный код
Подробнее о наложении CSS… Методы наложения CSS
Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.
Замена изображения при наведении CSS — событие onmouseover
Следующий код CSS показывает, как изменить изображение при наведении курсора мыши. При наведении мыши один div, содержащий изображение, помещается поверх другого изображения.
Наведите указатель мыши на изображение.
Исходный код
Как наложить окно на всю страницу… Полноэкранное наложение CSS
Изменение ссылки на изображение при наведении курсора (создать эффект ролловера)
В следующем исходном коде показано, как изменить ссылку на изображение при наведении курсора мыши.
Наведите указатель мыши на ссылку изображения.
Исходный код
Раздел CSS Hover
Вы можете изменить цвет фона Div при наведении. Следующий код CSS показывает, как изменить цвет фона div при наведении.
Наведите указатель мыши на Div.
Эффекты наведения CSS Div
Исходный код
Как создать эффекты наложения изображения при наведении с помощью CSS?
Как создать эффекты наложения изображения при наведении с помощью CSS?
Как создать эффекты наложения изображения при наведении с помощью CSS?
Обзор
В изображении эффектов наведения CSS мы добавим другое изображение к основному изображению, чтобы другое изображение можно было увидеть, размывая основное изображение при наведении на него курсора. Мы достигнем этого, используя 5 различных типов эффектов наведения.
- Фейд
- Верхняя часть слайда
- Нижняя часть слайда
- Слайд влево
- Ползун вправо
Предварительные требования
Изучение основ CSS
Изучение основ HTML
Как создать эффект наложения изображения при наведении с помощью CSS?
Когда пользователь наводит курсор на элемент в CSS, этот элемент реагирует, запуская эффекты перехода. Это эффективный подход к улучшению взаимодействия с пользователем, который используется для выделения важных элементов на веб-странице. Эффект наложения изображения при наведении добавляет другой эффект или изображение поверх основного изображения. Эффект наложения CSS можно создать, используя следующее:
- Он будет состоять из двух разделов, один из которых будет наложенным и будет содержать изображение, которое будет отображаться при наведении курсора на изображение.
- Другой будет контейнером, который будет содержать как оверлей, так и изображение.
Давайте создадим базовый HTML-код, содержащий изображение.
<голова> <мета-кодировка="UTF-8">Масштабирование изображения при наведении курсора <тело> <центр>![]()
Вывод:
Типы эффектов при наведении в CSS
Fade
В эффекте Fade , когда мы наводим курсор на изображение, наложение появляется в верхней части изображения. Здесь мы устанавливаем ширину и высоту изображения, затем мы регулируем высоту разделения контейнера, чтобы относительно второго контейнера div был эффект наложения, который создает эффект наведения на базовое изображение.
Пример из Fade эффект:
<голова> <мета-кодировка="UTF-8">Наложение изображения <стиль> .контейнер { положение: родственник; ширина: 250 пикселей; высота: 250 пикселей; отображение: встроенный блок; } .изображение { дисплей: блок; ширина: 250 пикселей; высота: 250 пикселей; } .оверлей { положение: абсолютное; переход: все .3s легкость; непрозрачность: 0; цвет фона: #eee; } .container: наведение .overlay { непрозрачность: 1; } .эффект наложения { ширина: 250 пикселей; высота: 250 пикселей; верх:0; слева: 0; цвет фона: #00b1ba; } <тело> <дел><дел>
Результат:
Slide Top
Здесь мы создаем Slide Top эффект наложения при наведении. Здесь ширина изображения установлена на 250 пикселей, высота установлена на верх и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться сверху вниз.
Пример эффекта Slide Top :
<голова> <мета-кодировка="UTF-8">Наложение изображения <стиль> .контейнер изображения { ширина: 250 пикселей; высота: 250 пикселей; } .контейнер { положение: родственник; ширина: 250 пикселей; высота: авто; } .оверлей { положение: абсолютное; переход: все 0,3 с легкости; непрозрачность: 0; цвет фона: #eee; } .container: наведение .overlay { непрозрачность: 1; } .overlayTop{ ширина: 250 пикселей; высота: 0; сверху: 0; справа: 0 пикселей; цвет фона: #00b1ba; } .container: наведение .overlayTop{ высота: 250 пикселей; } <тело> <дел>
<дел>
Результат:
Slide Bottom
Здесь мы создаем Slide Bottom эффект наложения при наведении. Здесь ширина изображения установлена на 250 пикселей, высота установлена на низ и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться снизу вверх.
пример эффекта Slide Bottom :
<голова> <мета-кодировка="UTF-8">Наложение изображения <стиль> .изображение { ширина: 250 пикселей; высота: 250 пикселей; } .контейнер { положение: родственник; ширина: 250 пикселей; высота: авто; } .оверлей { положение: абсолютное; переход: все 0,3 с легкости; непрозрачность: 0; цвет фона: #eee; } .container: наведение .overlay { непрозрачность: 1; } .overlayBottom{ ширина: 250 пикселей; высота: 0; внизу: 0; справа: 0 пикселей; цвет фона: #00b1ba; } .container: hover .overlayBottom { высота: 255 пикселей; } <тело> <дел>
<дел>
Leave a Comment