Css hover img: Hover-эффекты для изображений
Простые hover-эффекты для изображений при помощи CSS
Hover-эффекты — достаточно интересная тема для изучения. Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример имеет HTML и CSS коды, которые вы можете увидеть в действии.
Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.
Перед тем, как приступить к созданию отдельных примеров, требуются некоторые базовые установки. Ниже приведен CSS-код, которые мы будем использовать, чтобы реализовать все примеры.
Большинство это основные вещи: box-sizing позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применять некоторые основные стили для каждой фотографии.
Масштабирование и панорамирование
Первая группа эффектов включает в себя использование некоторых приемов с hidden overflow.
Demo
Увеличение
Для начала, мы сделаем так, что, когда пользователь наводит курсор на изображение, фотография увеличивалась, но продолжала оставаться в пределах своих границ.
Вот HTML-код:
<div> <img src="http://lorempixel.com/400/400/people/9" alt="portrait"> </div>
Обратите внимание, что изображение, которое было использовано в примере имеет размеры 400px на 400px. Теперь давайте посмотрим CSS.
/*GROW*/
.grow img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 400px;
height: 400px;
}Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем к 400px. Поскольку у нас overflow — hidden, это позволит нам получить эффект масштабирования.
Сжатие
В прошлом примере, мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400px и при наведении курсора уменьшите их на 300 пикселей.
HTML
<div> <img src="http://lorempixel.com/400/400/nightlife/4" alt="city"> </div>
CSS
/*SHRINK*/
.shrink img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.shrink img:hover {
width: 300px;
height: 300px;
}Боковое панорамирование
В следующем эффекте размер изображения не меняется, но при наведении фотография перемещается в сторону. Это хороший способ, чтобы подчеркнуть движение объекта.
HTML
<div> <img src="http://lorempixel.com/600/300/sports/8" alt="kick"> </div>
Здесь мы используем изображение шириной 600px и высотой только 300px — мы изменяем горизонтальное положение фотографии и нам не нужно применять эффекты к высоте.
CSS
/*SIDEPAN*/
.sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.sidepan img:hover {
margin-left: -200px;
}Для создание эффекта панорамирования мы не будем изменять размер изображения, как это делали в прошлый раз, но вместо этого, используя margin, будем размещать изображение левее. Если вы хотите, чтобы изображение перемещалось вправо, используйте margin-right.
Вертикальное панорамирование
Чтобы передать эффект движения, будем еще раз использовать этот эффект — он также подходит для создания вертикального панорамирования.
HTML
<div> <img src="http://lorempixel.com/300/600/sports/5" alt="climb"> </div>
CSS
/*VERTPAN*/
.vertpan img {
margin-top: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.vertpan img:hover {
margin-top: -200px;
}Код практически такой же, как и в прошлый раз, только теперь вместо margin-left мы используем margin-top.
Трансформация
Следующие эффекты более динамичны.
Демо
Наклон
Теперь давайте сделаем так, чтобы при наведении на изображение, изменялся угол наклона.
HTML
<div> <img src="http://lorempixel.com/300/300/transport/5" alt="car"> </div>
CSS
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}Как вы можете видите, все, что нам нужно было — повернуть изображение на десять градусов. Просто и эффективно!
Скругление углов
Когда пользователь наводит на изображение, оно начинает вращаться, при этом превращаясь из круга в квадрат.
HTML
<div> <img src="http://lorempixel.com/300/300/nature/5" alt="beach"> </div>
CSS
/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}Здесь установлен класс morph, который начинает вращаться на 360 градусов при наведении курсора мыши на него, а border-radius будет постепенно изменяться до 50%, в результате чего превратится в круг.
Фокус
Вот еще один способ использования border-radius для закругления изображения. На этот раз, однако, мы будем не только увеличиватьborder-radius, но и его толщину. В сочетании с border-box, это создаст эффект, который фокусируется на определенной части изображения.
HTML
<div>
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>CSS
/*FOCUS*/
.focus {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.focus:hover {
border: 70px solid #000;
border-radius: 50%;
}
Мы взяли border 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.
Webkit-фильтры
В отличие от приведенных выше примеров, каждый из которых использует несколько префиксов, чтобы обеспечить максимальную совместимость браузера, следующие примеры используют только префикс WebKit. Данные примеры работают только в Safari и Chrome. Несмотря на ограничения, Webkit-фильтры позволяют выполнять некоторые довольно удивительные эффекты! Демо
Размытие
Первый эффект, который мы будем применять, — простое размытие. Теперь размытия можно добиться с помощью одной маленькой строки кода.
HTML
<div> <img src="http://lorempixel.com/300/300/transport/2" alt="plane"> </div>
CSS
/*BLUR*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}Как вы видите, мы используем -webkit-filter , а затем устанавливаем размытие blur 5px.
B&W
На этот раз мы собираемся снизить насыщенности изображения при наведении на него курсора мыши. Раньше, чтобы добиться такого результата, нужно было использовать два изображения, но с фильтрами Webkit, мы можем сократить до одного.
HTML
<div> <img src="http://lorempixel.com/300/300/nature/2" alt="sea"> </div>
CSS
/*B&W*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}Здесь для grayscale было установлено значение 100%.
Яркость
Для нашего последнего эффекта, мы будем затемнять фото по умолчанию, а затем возвращать его в нормальное состояние при наведении курсора мыши.
HTML
<div> <img src="http://lorempixel.com/300/300/technics/2" alt="sea"> </div>
CSS
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(-65%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(0%);
}По материалам Joshua Johnson.
Перевод — Дежурка.
Возможно, вас также заинтересуют следующие статьи:
Псевдокласс :hover | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | ||
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Синтаксис
элемент:hover { … }
Значения
Нет.
Пример 1
HTML5CSS2.1IECrOpSaFx
<!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>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.
Рис. 1. Результат использования псевдокласса :hover для ссылок
Пример 2
HTML5CSS2.1IECrOpSaFx
<!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>) для создания двухуровневого меню. Результат примера показан на рис. 2.
Рис. 2. Использование :hover для создания меню
Браузеры
В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.
Hover css эффект при наведении примеры
«Hover» — это один из способов оживить ссылку, но и не только ссылку! Можно «hover» применить для картинки, блока и в общем для всего, что имеет физическую оболочку – имеется ввиду тег.
Если у вас есть код какого-то объекта, то его на 99% можно обернуть в свойство :hover. Конечно же мы не будем рассматривать все возможные варианты использования a:hover.
Hover html css эффект при наведении
Что такое hover?
Я всегда называл «hover» — свойством, и посудите сами, что способность изменяться объектам – самое правильное название свойство, но на самом деле «hover» — это псевдокласс.
С самого начала нужно дать определение. Что такое hover !? Hover — как я и написало ранее – способность изменять свои свойства при наведении мышки.
Как обозначается свойство меняющее цвет ссылки при наведении!?
Свойство, которое свойством не является — называется псевдокласс, которое меняет цвет при наведении мышки на ссылку, обозначается в стилях таким образом:
Где буква а, перед которой нет никаких знаков, ссы воспринимает как тег ссылки. После буквы а идет : — двоеточие, которое и обозначает, что дальше идет псевдокласс, после него идет название псевдокласса a:hover, далее открываются фигурные скобки и внутри прописываются свойства для этого тега ссылкиКак прописать hover в файле css, на странице, в теге
Нам нужно разобраться, как задавать свойство, которое меняет цвет при наведении! Поскольку ссылка у нас по умолчанию забита стиями, то возиться ней муторно, поэтому возьмем для римера любой тег! Вообще любой, например span! И будем с ним работать!Прежде нужно сказать пару вводных…
Как вы знаете, что свойства css можно прописывать тремя способами! 1). В файле css, 2). на странице в стилях, 3).в самом теге .
Начнем с файла css.
Изменение цвета с помощью «hover»
1). Для данного примера нам потребуется наш объявленный тег ранее без стилей! Сейчас на этом теге ничего не сработает!<span>Тег span без ничего</span>
Результат:
Тег span без ничего
Добавляем к нашему тегу класс -><span>Тег span с классом и example:hover</span>
Теперь в файле css напишем стили для этого класса, пусть hover меняет цвет при наведении на красный:
.example:hover
{
color:red;
}
Результат:
Что проверить работу стилей при наведении мышки наведите по тексту
Тег span с классом и example:hover
Появление руки при наведении пример
2). Второй вариант, это прописать стили на самой странице, обычно их прописывают между тегами <head></head>, откройте код страницы ctrl + U и далее нажмите ctrl + F и введите скопированное отсюда слово head… и вы увидите расположение данного тега.Но сейчас можно прописывать стили вообще в любом месте страницы!
Там они прописываются в соответствующем теге
<style></style>
Возьмем сверху экспериментальный тег, и к нему добавим еще один класс example_2:
<span>Тот же тег span, но и добавим еще один класс example_2</span>
Менять цвет второй раз скучно, давайте теперь к нашему тегу прибавим например руку, при наведении будет показываться рука.
За это у нас отвечает свойство -> cursor: pointer;. Берем теги стилей и помещаем куда-нибудь на страницу:<style>
.example_2
{
cursor: pointer;
}
</style>
Результат:
Здесь приведен пример появления руки при наведении, но и осталось изменение цвета при наведении!
Тот же тег span, но и добавим еще один класс example_2
Hover внутри тега
3). Третий вариант использования hover — использование его в самом теге!Здесь нужно сказать, что это невозможно , потому, что hover не свойство, а псевдо класс, и в теге размещение его невозможно!
НО!
Есть другая возможность поставить эффект при наведении прямо в тег — это добавление js во внутрь тега:
Создадим какой-то div со стилями! Наведите мышку на этот див…
<div> ЛЮБОЙ ТЕКСТ </div>
ЛЮБОЙ ТЕКСТ
Как видим — никакого эффекта при наведении нет!
Теперь добавим появление мышки над объектом и после этого будем отправлять в тег свойство стилей background:
onmouseover=»this.style.backgroundColor=’#FFF’;»
Но если мы убираем мышку, то свойства остаются!
ЛЮБОЙ ТЕКСТ
А нам надо чтобы свойства возвращались при покидании мышкой — в общем эмуляция псевдо класса Hover — нам надо добавить еще одно поведении мышки — покидание мышки с объекта:
onmouseout=»this.style.backgroundColor=’#333′;
Теперь соединим весь код вместе:
<div > ЛЮБОЙ ТЕКСТ </div>
Вот мы заставили hover работать и в теге!
ЛЮБОЙ ТЕКСТ
Использовать opacity в hover в css
Решил добавить пример использования hover в связке с opacity , все довольно просто! Мы можем просто понизить opacity в hover до 0.5.example_opacity:hover
{
opacity: 0.5;
}
<span>Делаем opacity 0.5 в hover</span>
Эффект будет понижение контрастности.. или просто будет становиться прозрачным…
Результат установки opacity в hover
Делаем opacity 0.5 в hover
Если сделать наоборот!?
Предположим, что нам требуется убрать opacity в hover. Изначально устанавливаем opacity 0.5, а в hover opacity =1.example_opacity2
{
opacity: 0.5;
}
.example_opacity2:hover
{
opacity: 1;
}
<span>Убираем эффект opacity в hover</span>
Результат:
Убираем эффект opacity в hover
:hover — Веб-технологии для разработчиков
Описание
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.Спецификации
Поддержка браузерами
| Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
для <a> элементов | 0.2 | 1.0 (1.7 или ранее) | 4.0 | 4.0 | 2.0.4 (419) различные ошибки до этой версии |
| для всех элементов | 0.2 | 1.0 (1.7 или ранее) | 7.0 | 7.0 | 2.0.4 (419) различные ошибки до этой версии |
| для псевдоэлементов | ? | 28 (28) | ? | ? | ? |
| Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | ? | ? | ? | ? | ? |
В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии :hover, пока курсор не передвинут. Смотрите IE баг 926665.
В IE9 (и возможно ранее), если у <table> есть родитель с width, установленной не в auto и overflow-x: auto;, а у <table> столько контента, что он переполняет родителя по горизонтали, а также есть :hover стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота <table>. Вот живой пример, которой иллюстрирует этот баг. Один из способов исправления, установление min-height: 0%; на родителя таблицы (должны быть указаны %, 0 и 0px не работают). Баг подняли в jQuery ticket #10854, но его закрыли, так как это не ошибка jQuery.
На Safari Mobile for iOS 7.1.2, нажатие на кликабельный элемент вызывает переход элемента в состояние :hover, и элемент остаётся в нём, пока другой элемент не войдёт в состояние :hover.
Смотрите также:
Псевдокласс :hover | CSS | WebReference
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Синтаксис
Селектор:hover { ... }Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!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=»page/1.html»>Ссылка 1</a></p> <p><a href=»page/2.html»>Ссылка 2</a></p> <p><a href=»page/3.html»>Ссылка 3</a></p> </body> </html>В данном примере псевдокласс :hover применяется к ссылке (элементу <a>), при этом меняется цвет ссылки и фона под ней.
<!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=»#»>Русская кухня</a> <ul> <li><a href=»#»>Бефстроганов</a></li> <li><a href=»#»>Гусь с яблоками</a></li> <li><a href=»#»>Крупеник новгородский</a></li> <li><a href=»#»>Раки по-русски</a></li> </ul> </li> <li><a href=»#»>Украинская кухня</a> <ul> <li><a href=»#»>Вареники</a></li> <li><a href=»#»>Жаркое по-харьковски</a></li> <li><a href=»#»>Капустняк черниговский</a></li> <li><a href=»#»>Потапцы с помидорами</a></li> </ul> </li> <li><a href=»#»>Кавказская кухня</a> <ul> <li><a href=»#»>Суп-харчо</a></li> <li><a href=»#»>Лилибдж</a></li> <li><a href=»#»>Чихиртма</a></li> <li><a href=»#»>Шашлык</a></li> </ul> </li> <li><a href=»#»>Кухня Средней Азии</a></li> </ul> </body> </html>В данном примере псевдокласс :hover добавляется к элементу списка (<li>) для создания двухуровневого меню.
Примечание
В браузере Internet Explorer до версии 7 псевдокласс :hover работает только для ссылок.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 31.08.2017
Редакторы: Влад Мержевич
33 hover-эффекта на CSS3, о которых следует знать каждому
Сегодня я хочу поделиться с вами подборкой, состоящей из 33 hover-эффектов, основанных на CSS3.
Как уже понятно из заголовка, здесь вы найдете коллекцию, состоящую из 10 невероятно стильных CSS эффектов:
Этот невероятный CSS3-эффект поможет вам добиться уникального результата. При наведении курсора на элементы страницы эффект начинает следовать за указателем, создавая невероятный трехмерный эффект:
Несмотря на то, что этот эффект можно по праву считать самым распространенным, он по-прежнему способен привлекать внимание:
Если вам нужны круговые эффекты на CSS3-коде, то вы попали в нужное место! Здесь их целых 12 штук!
Еще один интересный CSS эффект при наведении курсора, который позволит создать невероятно привлекательные миниатюры или украсить любые изображения:
Предлагаем вашему вниманию несколько эффектов при наведении на кнопки. Все они достаточно привлекательны, и идеально подойдут для сайтов любого типа:
Еще один набор, состоящий из 10 различных CSS3-эффектов. Большинство из них очень впечатляющие:
Данная коллекция включает в себя четыре различных эффекта при наведении на картинку CSS. Каждый эффект раскрывает заголовок и описание:
Забавный и интересный эффект при наведении курсора на изображения. Он хорошо подойдет для раздела отзывов или списка сотрудников с их фотографиями:
Эффект, выполненный в винтажном стиле, который точно напомнит вам о прошлом!
Несмотря на название, это непросто эффект. Он показывает заголовки и слегка изменяет уровень прозрачности при наведении курсора:
Еще один простой, но очень привлекательный CSS эффект. При наведении курсора мыши на изображение оно переворачивается, раскрывая пользователю заголовок и описание:
Пока не наведете курсор на картинку, не поймете всей красоты эффекта. Бессистемные линии моментально выстраиваются в логотип, который тут же оформляется цветом:
Должен признать, что это самый интересный CSS hover эффект при наведении. Просто невероятно, как одно изображение раскрывает другое!
Очень простой эффект, который все равно способен впечатлить. Наведение курсора на изображение приводит к незначительному изменению уровня прозрачности и смещению фокуса внимания на ссылку:
Возможно, это не самый практичный эффект, однако он точно забавный! Наведите курсор на солнцезащитные очки, и начнется магия!
Вам обязательно стоит опробовать каждый из них, так как все они помогут сделать изображения уникальными!
Этот уникальный hover CSS эффект отлично подойдет для текста, кнопок или картинок:
Не знаете, как украсить иконки поиска или карты? Тогда это решение для вас! Плавные трансформации будут приятны любому глазу:
Эффект отлично подойдет для скрытия кнопок социальных сетей, которые будут отображаться лишь при наведении курсора:
Этот CSS эффект поможет привлекательным образом отобразить дополнительную информацию о товарах в интернет-магазине:
Идеальный эффект при наведении для раздела контактов. Этот анимированный конверт отображает контактную информацию на развороте. Но происходит это только после наведения курсора:
Уникальный эффект при наведении, который позволяет заменить традиционную кнопку “Вверх” на анимированную:
Здесь представлено сразу два эффекта. Кроме увеличения картинки эффект также изменяет область отображения при наведении курсора на изображение:
Этот CSS эффект для сайта был разработан под вдохновением от видео, посвященного OS X Yosemite:
Еще один круглый эффект, применимый к круговым изображениям. Здесь представлено четыре различных hover-стиля:
Этот эффект представляет собой воссоздание анимации иконки браузера Safari. Можно без труда заменить иконку собственной картинкой или логотипом:
Этот простой CSS эффект можно применить как к кнопкам, так и к картинкам. Небольшое количество подсветки позволит представить картинки на странице в лучшем свете:
Если вы работаете над площадкой для размещения фотографий или картинок, то этот эффект может пригодиться. При наведении курсора изображение складывается в забавной манере, раскрывая при этом дополнительную информацию:
Интересный эффект, который можно применить к изображениям на сайте. Он как бы разглаживает изображение при наведении курсора:
Этот интересный CSS эффект при наведении позволяет изменять фон при наведении курсора на кнопку:
Еще один эффект при наведении, ориентированный на движение. Он позволяет слегка изменить уровень прозрачности изображения, как только на нем окажется курсор мыши:
Эти красивые hover CSS эффекты устроены довольно интересно. Настоящая анимация и масштабируемые SVG-картинки позволяют использовать подобные эффекты на сайтах любого типа:
Это, пожалуй, лучшие эффекты, созданные с помощью CSS3, которые мне удалось найти. Как они вам? Какие из них вы планируете использовать в собственных проектах? Напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
Простые hover-эффекты для изображений при помощи CSS
Hover-эффекты — достаточно интересная тема для изучения. Ведь их применение может сделать ваш сайт более динамичным и живым. Сегодня мы рассмотрим некоторые эффекты для работы с изображениями. Каждый пример имеет HTML и коды CSS, которые вы можете увидеть в действии.
Посмотрите на демо ниже, чтобы увидеть все hover-эффекты, которые будут рассматриваться в этом уроке.
Перед тем, требуются некоторые базовые установки.Ниже приведен CSS-код, который мы будем использовать, чтобы реализовать все примеры.
Большинство это основные вещи: настройка коробки позволяет управлять моделями (не стесняйтесь применять более точные настройки, если вам не нравится универсальный селектор). Класс pic дает нам место, чтобы применить некоторые основные стили для каждой фотографии.
Масштабирование и панорамирование
Первая группа эффектов включает в себя использование некоторых приемов со скрытым переполнением.
Демо
Увеличение
Для начала, мы сделаем так, что когда пользователь укажет курсор на изображение, фотография увеличивалась, но продолжала оставаться в пределах своих границ.
Вот HTML -код:
Обратите внимание, что изображение, которое было использовано в примере, имеет размеры 400px на 400px.Теперь давайте посмотрим CSS .
/ * РОСТ * /
.grow img {
высота: 300 пикселей;
ширина: 300 пикселей;
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.grow img: hover {
ширина: 400 пикселей;
высота: 400 пикселей;
} Мы вначале устанавливаем размер изображения зооpx на 300px, а затем, когда пользователь наводит на него курсор, увеличиваем на 400px. Это позволит нам получить эффект масштабирования.
Сжатие
В прошлом примере мы посмотрели, как изображение при наведении курсора мыши увеличивается. Рассмотрим обратный эффект. Этот метод в целом точно такой же, только на этот раз вы начнете с размеров в 400 пикселей и при наведении курсора уменьшите их на 300 пикселей.
HTML
КСС
/ * УСАДКА * /
.shrink img {
высота: 400 пикселей;
ширина: 400 пикселей;
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.shrink img: hover {
ширина: 300 пикселей;
высота: 300 пикселей;
} Боковое панорамирование
В следующем эффекте размер изображения не меняется, но при наведении перемещается в сторону. Это хороший способ, чтобы подчеркнуть движение объекта.
HTML
Здесь мы используем изображение шириной 600px и высотой только 300px.
КСС
/ * СИДЕПАН * /
.sidepan img {
маржа слева: 0 пикселей;
-webkit-transition: легкость маржи 1 с;
-moz-transition: маржа 1s легкости;
-o-transition: маржа 1s легкости;
-ms-transition: маржа 1s легкость;
переход: легкость маржи 1с;
}
.sidepan img: hover {
маржа слева: -200 пикселей;
} Для создания эффекта панорамирования мы не будем использовать размер изображения, как это делали в прошлый раз, но вместо этого, используя поля, будем размещать изображение левее. Если вы хотите, чтобы изображение перемещалось вправо, используйте поле справа.
Вертикальное панорамирование
Чтобы передать эффект движения, будем еще раз использовать этот эффект — он также подходит для создания вертикального панорамирования.
HTML
КСС
/ * ВЕРТПАН * /
.vertpan img {
маржа сверху: 0 пикселей;
-webkit-transition: легкость маржи 1 с;
-moz-transition: маржа 1s легкости;
-o-transition: маржа 1s легкости;
-ms-transition: маржа 1s легкость;
переход: легкость маржи 1с;
}
.vertpan img: hover {
margin-top: -200 пикселей;
} Код практически такой же, как и в прошлый раз, только теперь вместо margin-left мы используем margin-top.
Трансформация
Следующие эффекты более динамичны.
Демо
Наклон
Теперь давайте сделаем так, чтобы при наведении на изображение, изменялся угол наклона.
HTML
КСС
/ * НАКЛОН * /
.наклон {
-webkit-transition: все 0.5s легкость;
-moz-transition: легкость всего 0.5s;
-o-переход: легкость всего 0,5 с;
-ms-transition: легкость всего 0,5 с;
переход: легкость всего 0,5 с;
}
.tilt: hover {
-webkit-transform: повернуть (-10deg);
-moz-transform: повернуть (-10deg);
-o-преобразование: повернуть (-10deg);
-ms-transform: повернуть (-10deg);
преобразовать: повернуть (-10deg);
} Как вы можете видеть, все, что нам нужно было — повернуть изображение на десять градусов. Просто и эффективно!
Скругление углов
Когда пользователь наводит на изображение, оно начинает вращаться, при этом превращаясь из круга в квадрат.
HTML
КСС
/ * МОРФ * /
.превращаться {
-webkit-transition: легкость всего 0,5 с;
-moz-transition: легкость всего 0.5s;
-o-переход: легкость всего 0,5 с;
-ms-transition: легкость всего 0,5 с;
переход: легкость всего 0,5 с;
}
.morph: hover {
радиус границы: 50%;
-webkit-transform: повернуть (360 градусов);
-moz-transform: повернуть (360 градусов);
-о-преобразование: поворот (360 градусов);
-ms-transform: повернуть (360 градусов);
преобразовать: повернуть (360 градусов);
} Здесь установлен класс morph, который начинает вращаться на 360 градусов при наведении курсора мыши на него, а border-radius будет постепенно изменяться до 50%, в результате чего превратится в круг.
Фокус
Вот еще один способ использования border-radius для закругления изображения. На этот раз, однако, мы будем не только увеличиватьborder-radius, но и его толщину. В сочетании с рамкой создается эффект, который фокусируется на определенных частях изображения.
HTML
КСС
/ * ФОКУС * /
.focus {
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.focus: hover {
граница: 70px solid # 000;
радиус границы: 50%;
} Мы взяли границу 10px и превратил его в 70px черную рамку при проворачивании радиусе до 50%, как мы это делали в предыдущем примере.
Webkit-фильтры
В отличие от приведенных выше примеров, каждый из которых использует несколько префиксов, обеспечивает максимальную совместимость, следующие примеры используют только префикс WebKit.Данные примеры работают только в Safari и Chrome. Несмотря на ограничения, Webkit-фильтры выполняют некоторые довольно удивительные эффекты! Демо
Размытие
Первый эффект, который мы будем применять — простое размытие. Теперь размытия можно добиться с помощью одной строки кода.
HTML
КСС
/ * МЫТЬ * /
.blur img {
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.blur img: hover {
-webkit-filter: размытие (5 пикселей);
} Как вы видите, мы используем -webkit-filter, а затем устанавливаем размытие размытия 5px.
Ч / Б
На этот раз мы собираемся насыщенности изображения при наведении на него курсора мыши.Раньше, чтобы добиться такого результата, нужно было использовать два изображения, но с фильтрами Webkit, мы можем сократить до одного одного.
HTML
КСС
/ * Ч / Б * /
.bw {
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.bw: hover {
-webkit-filter: оттенки серого (100%);
} Здесь для оттенков серого было установлено значение 100%.
Яркость
Для нашего последнего эффекта, мы будем затемнять фото по умолчанию, а затем вернуться в нормальное состояние при наведении курсора мыши.
HTML
КСС
/ * ТЕМНЫЙ * /
.brighten img {
-webkit-filter: яркость (-65%);
-webkit-transition: легкость на единицу;
-moz-transition: легкость на все 1с;
-o-переход: легкость на все единицы;
-ms-transition: легкость на все единицы;
переход: легкость на все единицы;
}
.brighten img: hover {
-webkit-filter: яркость (0%);
} По материалам Джошуа Джонсон.
Перевод — Дежурка.
Возможно, вас также заинтересуют следующие статьи:
.Псевдокласс: навести | htmlbook.ru
| Internet Explorer | Хром | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | ||
Краткая информация
Версии CSS
| КСС 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Синтаксис
элемент: hover {…}
Значения
Нет.
Пример 1
HTML5CSS2.1IECrOpSaFx
навести
<стиль>
ссылка {
цвет: # 0000d0; / * Цвет ссылок * /
отступ: 2 пикселя; / * Поля вокруг текста * /
}
a: hover {
фон: # 786b59; / * Цвет фона под сообщение * /
цвет: #ffe; / * Цвет ссылки * /
}
В данном примере псевдокласса: используемый метод ссылки (тегу ), при этом меняется цвет ссылки и фона под ней. Результат показан на рис. 1.
Рис. 1. Результат использования псевдокласса: hover для ссылок
Пример 2
HTML5CSS2.1IECrOpSaFx
навести
<стиль>
ul {
ширина: 180 пикселей; / * Ширина меню * /
стиль списка: нет; / * Для списка убираем маркеры * /
маржа: 0; / * Нет отступов вокруг * /
отступ: 0; / * Убираем поля вокруг текста * /
семейство шрифтов: Arial, sans-serif; / * Рубленый шрифт для текста меню * /
размер шрифта: 10pt; / * Размер названий в новом меню * /
}
li ul {
позиция: абсолютная; / * Подменю позиционирование абсолютно * /
дисплей: нет; / * Скрываем подменю * /
маржа слева: 165 пикселей; / * Сдвигаем подменю вправо * /
верхняя маржа: -2em; / * Сдвигаем подменю вверх * /
}
li a {
дисплей: блок; / * Ссылка как блочный элемент * /
отступ: 5 пикселей; / * Поля вокруг надписи * /
текстовое оформление: нет; / * Подчеркивание у ссылок убираем * /
цвет: # 666; / * Цвет текста * /
border: 1px solid #ccc; / * Рамка вокруг пунктов меню * /
цвет фона: # f0f0f0; / * Цвет фона * /
нижняя граница: нет; / * Границу снизу не проводим * /
}
li a: hover {
цвет: #ffe; / * Цвет текста активного пункта * /
цвет фона: # 5488af; / * Цвет фона активного пункта * /
}
li: hover ul {
дисплей: блок; / * При выделении пункта курсором мыши отображается подменю * /
}
.brd {
нижняя граница: сплошной 1px #ccc; / * Линия снизу * /
}
В данном примере используется псевдокласс: наведите указатель на элемент списка (тег
Рис. 2. Использование: hover для создания меню
Браузеры
В браузере Internet Explorer до версии 6.0 включительно псевдокласс: hover работает только для ссылок.
.Hover css эффект при наведении примеры
«Hover» — это один из способов оживить ссылку, но и не только ссылку! Можно «hover» применить для картинки, блока и в общем для всего, что имеет физическую оболочку — имеется ввиду тег.
Если у вас есть код какого-то объекта, то его на 99% можно обернуть в свойство: hover. Конечно же мы не будем рассматривать все возможные варианты использования a: hover.
Hover html css эффект при наведении
Что такое зависание?
Я всегда называл «hover» — своимством, и посудите сами, что изменяться свойством объектам — самое правильное название свойства, но на самом деле «hover» — это псевдокласс.
С самого начала нужно дать определение. Что такое hover!? Hover — как я и написало ранее — способность оценить свои свойства при наведении мышки.
Как обозначается свойство меняющее цвет ссылки при наведении !?
Свойство, которое своимством не является — псевдокласс, которое меняет цвет при наведении мышки на ссылку, обозначается в стилех таким образом:
Где буква а, перед которой нет никаких знаков, воспринимает как тег ссылки.После буквы а идет: — двоеточие, которое и обозначает, что дальше идет псевдокласс, после него идет название псевдокласса a: hover, далее открываются фигурные скобки и внутри прописываются свойства для этого тега ссылкиКак прописать hover в файле css, на странице, в теге
Нам нужно разобраться, как задавать свойство, которое меняет цвет при наведении! Ссылка у нас по умолчанию забита стиями, чтобы возиться ней муторно, поэтому возьмем для римера любой тег! Вообще любой, например span! И будем с ним работать!Прежде нужно сказать пару вводных…
Как вы знаете, что свойства css можно прописывать тремя способами! 1). В файле css, 2). на странице в стилях, 3) .в самом теге.
Начнем с файла css.
Изменение цвета с помощью «hover»
1). Для данного нам потребуется объявленный тег ранее без стилей! Сейчас на этом теге ничего не сработает!Тег span без ничего
Результат:
Тег пролет без ничего
Добавляем к нашему тегу класс ->Тег span с классом и пример: hover
Теперь в файле css напишем стили для этого класса, пусть hover меняет цвет при наведении на красный:
.пример: навести
{
цвет: красный;
}
Результат:
Что проверить работу стилей при наведении мышки наведу по тексту
Тег span с классом и пример: hover
Появление руки при наведении пример
2). Второй вариант, это прописать стили на самой странице, обычно их прописывают между тегами, откройте код страницы ctrl + U и далее нажмите ctrl + F и введите скопированное отсюда слово head… и вы увидите изображение данного тега.Но сейчас можно прописывать стили вообще в любом месте страницы!
Там они прописываются в соответствующем теге
Возьмем сверху экспериментальный тег, и к нему добавим еще один класс example_2:
Тот же тег span, но и добавим еще один класс example_2
Менять цвет второй раз скучно, давайте теперь к нашему тегу прибавим, например, руку, при наведении будет показывать руку.
За это у нас отвечает свойство -> cursor: pointer ;. Берем теги стилей и помещаем куда-нибудь на страницу:<стиль>
.example_2
{
курсор: указатель;
}
Результат:
Здесь приведен пример появления руки при наведении, но и осталось изменение цвета при наведении!
Тот же тег span, но и добавим еще один класс example_2
Hover внутри тега
3).Третий вариант использования hover — использование его в самом теге!Здесь нужно сказать, что это не свойство, а псевдо класс, и в теге размещение его невозможно!
НО!
Есть другая возможность поставить эффект при наведении прямо в тег — это добавление js во внутрь тега:
Создадим какой-то div со стилями! Наведите мышку на этот див …
ЛЮБОЙ ТЕКСТ
Как видим — никакого эффекта при наведении нет!
Теперь добавим появление мышки над объектом и после этого будем отправлять в тег свойство стилей background:
onmouseover = «это.style.backgroundColor = ‘# FFF’; «
Но если мы убираем мышку, то свойства остаются!
ЛЮБОЙ ТЕКСТ
А нам надо добавить еще одно поведении мышки — в общем эмуляция псевдо класса Hover — нам надо добавить еще одно поведении мышки — покидание мышки с объекта:
onmouseout = «this.style.backgroundColor = ‘# 333’;
Теперь соединим весь код вместе:
Вот мы заставили зависать работать и в теге!
ЛЮБОЙ ТЕКСТ
Использовать непрозрачность при наведении в css
Решил добавить пример использования hover в связке с opacity, все довольно просто! Мы можем просто понизить непрозрачность при наведении до 0.5.example_opacity: наведение
{
непрозрачность: 0,5;
}
Делаем непрозрачность 0,5 при наведении
Эффект будет понижение контрастности .. или просто будет становиться прозрачным …
Результат установки непрозрачности в hover
Делаем непрозрачность 0,5 при наведении
Если сделать наоборот !?
Предположим, что нам требуется убрать непрозрачность при наведении.Изначально устанавливаем opacity 0.5, а в hover opacity = 1.example_opacity2
{
непрозрачность: 0,5;
}
.example_opacity2: наведение
{
непрозрачность: 1;
}
Убираем эффект непрозрачности при наведении
Результат:
Убираем эффект непрозрачности в зависании
.: hover — Веб-технологии для разработчиков
Описание
CSS псевдокласс : hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как : ссылка , : посещенные и : активные , появляющиеся в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило : hover до правил : ссылка и : посещена , но после : активна , как определено в LVHA-порядок : : ссылка — : посещена — : наведение — : активное .
Псевдокласс : наведение может выбрать к любому псевдоэлементу.
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Замечания по использованию : на сенсорных экранах : hover проблемный или не работает. В зависимости от, псевдокласс : hover может действовать даже после того, как пользователь коснулся элемента на другой элемент.Так как сенсорные устройства очень распространены, чтобы веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
Примеры
: ссылка: hover {контур: красный пунктир; }
.foo: hover {фон: золото; }
Выпадающее меню
С псевдоклассом : hover вы можете создать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать , выпадающие меню на чистом CSS (только на CSS, без использования JavaScript).Сущность этой техники — создание правил, типа следуюшего:
div.menu-bar ul ul {
дисплей: нет;
}
div.menu-bar li: hover> ul {
дисплей: блок;
}
применим к структуре HTML типа следующая:
Смотрите наш полный пример выпадающего меню, основанный на CSS.
Галерея полноразмерных изображений и превью
. Вы можете использовать псевдокласс : hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
: проверено (используется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru / CSS /: проверено.Спецификации
Поддержка браузерами
| Возможность | Android | Firefox Mobile (Gecko) | IE мобильный | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | ? | ? | ? | ? | ? |
В IE8-11, наведя курсор на элемент, прокручивая вверх / вниз, без перемещения курсора, элемент останется в состоянии : наведите курсор на , пока курсор не передвинут.Смотрите IE баг 926665.
В IE9 (и возможно ранее), если у На Safari Mobile для iOS 7.1.2 другой элемент вызывает переход элемента в состояние Смотрите также: есть родитель с
width , установленной не в auto и overflow-x : auto; , а у большого количества контента, что он переполняет родителя по горизонтали, а также есть
: hover стили, установленные на элементах в таблице, при наведении элементов будет увеличиваться высота . Вот живой пример, которым показывает этот баг.Один из способов исправления, установление
мин-высота: 0%; на родителя таблицы (должны быть указаны%, 0 и 0px не работают). Баг подняли в jQuery ticket # 10854, но его закрыли, так как это не ошибка jQuery.: hover , элемент остаётся в нём, пока элемент не войдёт в состояние : hover .