Css выделение объекта при наведении. Всплывающая подсказка html и css без скриптов. Hover эффекты кнопок и ссылок

Очень часто на сайтах вы могли встречать изменение или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс:hover в CSS. Сегодня рассмотрим некоторые приемы позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

a: hover { color : red ; }

a:hover { color: red; }

Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании .

button : hover { background : rgba (0 , 0 , 0 , 0 ) ; color : red ; } .my-picture : hover { opacity : 0.5 ; filter : alpha(opacity= 50 ) ; }

button:hover { background: rgba(0,0,0,0); color: red; } .my-picture:hover { opacity: 0.5; filter: alpha(opacity=50); }

Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому обязательно нужно указывать в коде .

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы:link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после:link и:visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

Как мы уже говорили выше, это самая популярная категория объектов на сайте, где встречается подобный прием. Вот вам несколько вариантов по теме.

Простые примеры для кнопок

Sullivan Buttons

Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).

CSS Icons on Hover

Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.

Button Hover Effects

По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.

Nav Hovers

Несколько фишек, которые позволяют сделать более необычные нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.

Hover эффекты для изображений

15 базовых приемов

Не смотря на то, что статья была опубликована достаточно давно методы корректно работают и сейчас. Здесь, наверное, собраны все возможные типовые преобразования для графики: несколько видов зума, повороты, размытие, ч/б, прозрачность, фильтры, сияние и др. Очень полезный материал.

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com . Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

В этой разработке более 100 простых способов «анимации» изображений или объектов при наведении. С помощью данных функций сможете реализовать разное появление кнопок, заголовков, текстов, социальных иконок и т.п. Есть варианты с изменением отображения картинок, накладками полупрозрачного фона.

По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

В проекте более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

) она как правило изменяет свой вид (становится в фокусе). Чаще всего это простое изменение цвета или добавления подчеркивания. Также изменяется курсор на кисть руки. В этой статье мы рассмотрим подробнее как красиво реализовать изменение стиля ссылки при наведении курсора.

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

При наведении ссылка станет красной и подчеркнутой: ссылка

Пример 2. Как изменить фон ссылки при наведении

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: ссылка

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor :pointer . В следующем примере мы изменим его на другой.

При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: ссылка

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым, при этом все это будет сглажено: ссылка

Преобразуется на странице в следующее:

Пример 5. Красивое подчеркивание ссылки

При наведении ссылка изменит цвет и появится необычное подчеркивание: ссылка

Преобразуется на странице в следующее.

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами . Связано это с тем, что при реализации таких эффектов используется , который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 {
filter: alpha (Opacity=25);
opacity: 0.25;
}
img.animate1:hover {

opacity: 1;
}

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 {
filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
}
img.animate1:hover {
filter: alpha (Opacity=100);
opacity: 1;
}

Результат:

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1{


— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
}

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
}

Результат:

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое . В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1:

И добавляем следующие описания стилей:

div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}

И результат:

Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.

Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент < a> . Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 {
background: url (img/button.png); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
}
a.rotate2:hover {
background-position: 0 -30px; /* Смещение фона */
}

Результат:

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

Animate2{
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
}
.animate2 img {
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

Animate2 img.first { /* первая картинка полностью прозрачная */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
opacity:1;
filter:alpha (opacity=100);
}
/* а вторая при наведении курсора становится прозрачной */
opacity:0;
filter:alpha (opacity=0);
}

Результат:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

Animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

И результат:

А если добавить свойство transform:

Animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
}

Получится так:

Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши . Эти и другие примеры я поместил на этой странице , там же можно скачать исходники. На этом все, до новых встреч.

Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.

Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!

Всплывающая картинка при наведении

a.сайт-ssilka:hover+div

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

Тег <а> с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).

В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh . Параметры задаются в пикселях.

Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.

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

Всплывающий текст при наведении на ссылку

a.сайт-ssilka:hover+div

Смелее!!! Наведи на меня курсор!

Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.

Исчезновение изображения при наведении на ссылку

a.сайт-ssilka:hover+div

Смелее!!! Наведи на меня курсор!

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

Важный момент! Каждый из представленных скриптов не вредит валидности сайта.

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

Всплывающая картинка CSS

position: relative;

Thumbnail:hover{

Thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: #3d3d3d;

border: 1px solid white;

visibility: hidden;

text-decoration: none;

border-radius: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

Thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

Thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

left: 60px; /*position where enlarged image should offset horizontally */

Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:

Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.