В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.
Делается данная «штука» при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.
Обновлено 17.01.2019
Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:
Как только мышка оказывается наведена на любое поле в списке — происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.
Вот так выглядит код данного блока:
В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер <div>, <li> и прочие подходящие теги.
Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div class="catside">тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).
Практика
Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).
.catside a:hover {
background: #0078BF;
color: #fff;
}
Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ).
Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.
Послесловие
В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.
Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.
Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE).
I’m trying to make a div’s background color change on mouse over.
the div {background:white;}
the div a:hover{background:grey; width:100%;
display:block; text-decoration:none;}
only the link inside the div gets the background color.
what could I do to make the whole div get that background color?
thank you
EDIT :
how can I make the whole div to act as a link — when you click anywhere on that div, to take you to an address.
1
The «a:hover» literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was «the div:hover» instead, which would trigger when the div was chosen.
Just to make sure, if you want to change only one particular div, give it an id («<div id='something'>«) and use the CSS «#something:hover {...}» instead. If you want to edit a group of divs, make them into a class («<div class='else'>«) and use the CSS «.else {...}» in this case (note the period before the class’ name!)
0
Using Javascript
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Jack and Jill went up the hill To fetch a pail of water. Jack fell down and broke his crown, And Jill came tumbling after.
</div>0
There is no need to put anchor. To change style of div on hover then
Change background color of div on hover.
.div_hover {
background-color: #FFFFFF;
}
.div_hover:hover {
background-color: #000000;
}<div class="div_hover"> Change div background color on hover</div>To make the whole div act as a link, set the anchor tag as:
display: block
And set your height of the anchor tag to 100%.
Then set a fixed height to your div tag.
Then style your anchor tag like usual.
For example:
<html>
<head>
<title>DIV Link</title>
<style type="text/css">
.link-container {
border: 1px solid;
width: 50%;
height: 20px;
}
.link-container a {
display: block;
background: #c8c8c8;
height: 100%;
text-align: center;
}
.link-container a:hover {
background: #f8f8f8;
}
</style>
</head>
<body>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
</body> </html>
Good luck!
0
html code:
<!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>
css code:
.nicecolor {
color:red;
width:200px;
height:200px;
}
.nicecolor:hover {
color:blue;
}
and thats how youll change your div from red to blue by hovering over it.
Set
display: block;
on a and give some height
simply try «hover» property of CSS. eg:
<html>
<head>
<style>
div
{
height:100px;
width:100px;
border:2px solid red;
}
div:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="#">
<div id="ab">
<p> hello there </p>
</div>
</a>
</body>
i hope this will help
You can just put the anchor around the div.
<a class="big-link"><div>this is a div</div></a>
and then
a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}
you could just contain the div in anchor tag like this:
a{
text-decoration:none;
color:#ffffff;
}
a div{
width:100px;
height:100px;
background:#ff4500;
}
a div:hover{
background:#0078d7;
}<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>Just make the property !important in your css file so that background color doesnot change on mouse over.This worked for me.
Example:
.fbColor {
background-color: #3b5998 !important;
color: white;
}
1
Как изменить вид ссылки при наведении на нее курсора мыши?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |
Задача
Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.
Решение
Псевдокласс :hover, который добавляется к селектору A, определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается
селектор A, потом :hover (пример 1).
Пример 1. Изменение вида ссылки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет ссылок</title>
<style>
a {
color: #008000; /* Цвет обычной ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
a:visited {
color: #800080; /* Цвет посещённой ссылки */
}
a:hover {
color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: underline; /* Добавляем подчеркивание */
}
</style>
</head>
<body>
<p><a href="rome.html">Cras ingens iterabimus aequor</a> —
завтра снова мы выйдем в огромное море.</p>
</body>
</html>В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда
на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде
идёт после :visited. Это имеет значение, иначе посещённые ссылки в данном случае
не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на неё курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover, как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон под ссылками</title>
<style>
a {
color: #000080; /* Цвет обычной ссылки */
padding: 2px; /* Поля вокруг текста */
}
a:visited {
color: #800080; /* Цвет посещенной ссылки */
}
a:hover {
text-decoration: none; /* Убираем подчеркивание */
color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */
background: #e24486; /* Цвет фона */
}
</style>
</head>
<body>
<p><a href="rome.html">Audaces fortuna juvat</a> -
счастье покровительствует смелым.</p>
</body>
</html>Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.
Рис. 2. Изменение цвета фона ссылки
От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу.
Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами.
Техника 1: Использование background-clip: text
На момент написания статьи background-clip: text — это экспериментальная функция, которая не поддерживается в Internet Explorer 11 и ниже.
Этот метод включает создание убирающегося текста с резким переходом градиента. Разметка состоит из одного HTML-элемента ссылки (<a>) для создания гиперссылки:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
|
<a href=«#»>Link Hover</a> |
Мы можем начать добавлять стили к гиперссылке. Использование overflow: hidden обрезает во время перехода при наведении любой контент за пределами гиперссылки:
|
a { position: relative; display: inline-block; font-size: 2em; font-weight: 800; color: royalblue; overflow: hidden; } |
Нам нужно будет использовать линейный градиент с резким переходом на 50% от начального цвета ссылки к цвету при наведении:
|
a { /* Same as before */ background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%); } |
Давайте используем background-clip, чтобы обрезать градиент и значение text для отображения текста. Мы также будем использовать свойства background-size и background-position для отображения исходного цвета:
|
a { /* Same as before */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; } |
Наконец, давайте добавим для гиперссылки свойство CSS transition и псевдо-класс CSS :hover. Чтобы ссылка окрашивалась при наведении слева направо, используйте свойство background-position:
|
a { /* Same as before */ transition: background-position 275ms ease; } a:hover { background-position: 0 100%; } |
Несмотря на то, что этот метод обеспечивает эффект наведения, Safari и Chrome будут обрезать оформление текста и тени, то есть они не будут отображаться. Применение стилей текста, таких как подчеркивание, с помощью свойства CSS text-decor не будет работать. Возможно, вам придется использовать другие подходы при создании подчеркиваний.
Техника 2: Использование width/height
Это работает благодаря использованию атрибута данных, содержащего тот же текст, что и в теге <a>, и установке width (окрашивание текста слева направо или справа налево) или height (окрашивание текста сверху вниз или снизу вверх), от 0% до 100% при наведении.
Вот разметка:
|
<a href=«#» data—content=«Link Hover»>Link Hover</a> |
CSS похож на тот, что мы использовали в предыдущей технике, минус свойства CSS background. Здесь будет использоваться свойство text-decoration:
|
a { position: relative; display: inline-block; font-size: 2em; color: royalblue; font-weight: 800; text-decoration: underline; overflow: hidden; } |
Теперь нам нужно использовать контент из атрибута data-content. Он будет расположен над содержимым в теге <a>. Мы используем небольшую хитрость: копируем текст в атрибуте данных и отображаем его через функцию attr() в свойстве content псевдо-элемента ::before.
|
a::before { position: absolute; content: attr(data-content); /* Prints the value of the attribute */ top: 0; left: 0; color: midnightblue; text-decoration: underline; overflow: hidden; transition: width 275ms ease; } |
Чтобы текст не переносился на следующую строку, будет применяться white-space: nowrap. Чтобы изменить цвет заливки ссылки, задайте значение для свойства CSS color, используя псевдо-элемент ::before и при значении width, начинающемся с 0:
|
a::before { /* Same as before */ width: 0; white-space: nowrap; } |
Увеличьте ширину псевдо-элемента ::before до 100% , чтобы завершить эффект наведения:
|
a:hover::before { width: 100%; } |
Хотя в этом методе используется трюк, свойства width или height не дают производительный переход CSS. Лучше всего использовать для достижения плавного перехода либо свойство transform, либо opacity со скоростью 60 кадров в секунду.
Использование свойства CSS text-decoration может позволить отображать различные стили подчеркивания при переходе. Я создал иллюстрирующую это демонстрацию, используя следующую технику: свойство CSS clip-path.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Техника 3: Использование clip-path
Для этой техники мы будем использовать свойство CSS clip-path с многоугольной фигурой. Многоугольник будет иметь четыре вершины, две из которых будут смещаться вправо при наведении:
Разметка такая же, как и в предыдущем методе. Мы снова будем использовать псевдо-элемент ::before, но CSS будет другим:
|
a::before { position: absolute; content: attr(data-content); color: midnightblue; text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease; } |
В отличие от предыдущих методов, text-decoration: underline должен быть объявлен для псевдо-элемента ::before с цветом заливки подчеркивания при наведении курсора. Теперь давайте рассмотрим CSS для техники clip-path:
|
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); |
Вершины многоугольника свойства clip-path устанавливаются в процентах, чтобы определить координаты в следующем порядке:
0 0 = вверху слева
0 0 = вверху справа
100% 0 = внизу справа
0 100% = внизу слева
Направление эффекта заливки можно скорректировать, изменив координаты. Теперь, когда у нас есть представление о координатах, мы можем заставить многоугольник расширяться вправо при наведении:
|
a:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } |
Этот метод работает довольно хорошо, но обратите внимание, что поддержка свойства clip-path зависит от браузера. Создание CSS-перехода с помощью clip-path — лучшая альтернатива, чем использование метода width/ height; однако, это действительно влияет на отрисовку браузером.
Техника 4: Использование преобразования
Разметка для этого метода использует метод маскировки с элементом span. Поскольку мы будем использовать дублированный контент в отдельном элементе, мы зададим для него aria-hidden=»true» для улучшения доступности — это скроет его от программ чтения с экрана, чтобы контент не читался дважды:
|
<a href=«#»><span data—content=«Link Hover» aria—hidden=«true»></span>Link Hover</a> |
CSS для элемента span содержит переход, который будет начинаться слева:
|
span { position: absolute; top: 0; left: 0; overflow: hidden; transform: translateX(-100%); transition: transform 275ms ease; } |
Далее нам нужно заставить span смещаться вправо вот так:
Для этого мы будем использовать функцию CSS translateX() и установим для нее значение 0:
|
a:hover span { transform: translateX(0); } |
Затем мы используем для span псевдо-элемент ::before, снова указав атрибут data-content, как мы делали ранее. Мы установим позицию, переместив ее на 100% вдоль оси x.
|
span::before { display: inline-block; content: attr(data-content); color: midnightblue; transform: translateX(100%); transition: transform 275ms ease; text-decoration: underline; } |
Как и для элемента span, для позиции псевдо-элемента ::before также будет установлено translateX(0):
|
a:hover span::before { transform: translateX(0); } |
Несмотря на то, что этот метод является наиболее совместимым с различными браузерами, для него требуется больше разметки и CSS. Тем не менее, использование свойства CSS transform очень полезно для производительности, поскольку не вызывает перерисовок и, следовательно, обеспечивает плавные переходы CSS со скоростью 60 кадров в секунду.
Мы это сделали!
Мы только что рассмотрели четыре различных метода для достижения одинакового эффекта. Хотя у каждого есть свои плюсы и минусы, вы можете видеть, что все они работают. Это аккуратный эффект, который делает ссылки более интерактивными.
Автор: Katherine Kato
Источник: //css-tricks.com
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
Смотреть
Подборка эффектов при наведении на текст пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание текста, заголовков, выделение цветом и многое другое.
При наведении на текст меняется цвет CSS
Эффект изменения цвета при наведении необходим, когда нужно выделить определенный фрагмент текста или абзац. Этот эффект так же подойдет и для ссылки.
Пример
HTML
<p class="change-text">Lorem Ipsum</p>
p.change-text{
color: #f66d52; /* Цвет текста */
font-size: 2em; /* Размер текста */
font-weight: bold;
padding: 20px 0px;
text-transform: uppercase;
line-height: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p.change-text:hover{
color: #5265f6; /* Меняем цвет текста */
}
Зачеркнутый текст CSS
Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста
и линии одинаковый.
Пример
HTML
<p class="line-through">Lorem Ipsum</p>
CSS
p.line-through{
color: #f66d52; /* Цвет текста */
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
text-decoration:none;
}
p.line-through:hover{
text-decoration:line-through; /* Добавляем зачеркивание */
}
Зачеркнутая ссылка или текст при наведении другим цветом CSS
Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.
Пример
<!— Ссылка —>
<!— Текст —>
Lorem Ipsum
HTML
<!-- Ссылка -->
<div class="crossed"><a href="#" class="crossed-link" title="">Lorem Ipsum</a></div>
<!-- Текст -->
<div class="crossed"><p class="crossed-text">Lorem Ipsum</p></div>
CSS
/* Ссылка */
a.crossed-link {
color: #f66d52; /* Цвет сылки */
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
position: relative;
display: inline-block;
}
a.crossed-link:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover a.crossed-link:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Текст */
p.crossed-text{
color: #ffa000; /* Цвет текста */
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
position: relative;
display: inline-block;
}
p.crossed-text:before {
content: '';
position: absolute;
width: 100%;
height: 1px; /* Высота зачеркивающей линии */
background: #666; /* Цвет зачеркивающей линии */
top: 45%;
animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover p.crossed-text:before {
animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
/* Анимация */
@keyframes in {
0% {
width: 0;
left: 0;
right: auto;
}
100% {
left: 0;
right: auto;
width: 100%;
}
}
@keyframes out {
0% {
width: 100%;
left: auto;
right: 0;
}
100% {
width: 0;
left: auto;
right: 0;
}
}
@keyframes show {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Появление тени для текста при наведении CSS
Эффект появления тени для текста подойдет для того, чтобы выделить определенный фрагмент текста на сайте, можно добавить и смену цвета текста,каак показано в примере, чтобы элементы стали более разнообразными и интересными для пользователя.
Пример
HTML
<p class="shadow-text">Lorem Ipsum</p>
CSS
.shadow-text{
color: #f66d52; /* Цвет текста */
font-size: 2em; /* Размер текста */
font-weight: bold;
padding: 20px 0px;
text-transform: uppercase;
line-height: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.shadow-text:hover{
color: #ffa000; /* Меняем цвет текста */
-webkit-text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;
}
Анимация с подчёркивающей и исчезающей линией у ссылки CSS
Этот эффект при наведении подойдет как для ссылки, так и для заголовка и текста, если это необходимо. С помощью такого эффекта можно выделить ключевые моменты и сделать сайт интереснее.
Пример
HTML
<a href="#" class="underline-one">Lorem Ipsum</a>
CSS
.underline-one {
color: #00bfff; /* Цвет обычной ссылки */
position: relative;
cursor: pointer;
text-decoration: none; /* Убираем подчеркивание */
}
.underline-one:after {
content: "";
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px; /* Высота линии */
background-color: black; /* Цвет подчеркивания при исчезании линии*/
transition: width 0.5s; /* Время эффекта */
}
.underline-one:hover:after {
content: "";
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px; /* Высота линии */
background-color: red; /* Цвет подчеркивания при появлении линии*/
transition: width 0.5s; /* Время эффекта */
}
Анимация с подчёркивающей линией у ссылки CSS
Анимация с подчёркивающей линией у ссылки CSS подойдет как для ссылок, так и для заголовков и текста. Необходимо будет обернуть ссылку в дополнительный див, чтобы задать ему нужные свойства.
Пример
HTML
<div class="link-ease-in-out">
<a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
</div>
CSS
.link-ease-in-out a {
display: inline-block;
color: #00bfff; /* Цвет обычной ссылки */
line-height: 1;
text-decoration: none; /* Убираем подчеркивание */
cursor: pointer;
}
.link-ease-in-out a:after {
background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
display: block;
content: "";
height: 2px; /* Высота линии */
width: 0%;
-webkit-transition: width .3s ease-in-out;
-moz--transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
.link-ease-in-out a:hover:after,
.link-ease-in-out a:focus:after {
width: 100%;
}
Изменение фона и цвета ссылки CSS
Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.
Пример
Lorem Ipsum
HTML
CSS
p {
color: #5a5a5a; /* Цвет текста */
background: #ffc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
transition: 1s linear; /* Время изменения */
}
p:hover {
color: #fff; /* Цвет текста */
background: #f66d52; /* Цвет фона */
}
Увеличение текста при наведении CSS
Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.
Пример
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
HTML
<p class="gain-left">Lorem Ipsum</p>
<p class="gain-center">Lorem Ipsum</p>
<p class="gain-right">Lorem Ipsum</p>
CSS
/* Текст слева */
.gain-left {
transition: 1s; /* Время эффекта */
text-align: left;
}
.gain-left:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст по центру */
.gain-center{
transition: 1s; /* Время эффекта */
text-align: center;
}
.gain-center:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст справа */
.gain-right {
transition: 1s; /* Время эффекта */
text-align: right;
}
.gain-right:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
Как добавить линию к заголовку с помощью :before и :after
Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.
Пример
Lorem Ipsum
HTML
<h3 class="title-example">Lorem Ipsum</h3>
CSS
h3.title-example{
font-size: 1em; /* Размер шрифта */
color: #5a5a5a; /* Цвет заголовка */
text-align: center; /* Текст по центру */
}
/* CSS код для линии над заголовком */
h3.title-example:before {
content: '';
display: block;
height: 1px; /* Высота линии */
background: #f66d52; /* Цвет линии */
width: 150px; /* Ширина линии до наведения */
margin: 0 auto 10px; /* Отступ с боков по центру и снизу */
transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:before {
width: 250px; /* Ширина линии при наведении */
transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
/* CSS код для линии под заголовком */
h3.title-example:after {
content: '';
display: block;
height: 1px; /* Высота линии */
background: #f66d52; /* Цвет линии */
width: 150px; /* Ширина линии до наведения */
margin: 10px auto 0; /* Отступ с боков по центру и сверху */
transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:after {
width: 250px; /* Ширина линии при наведении */
transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.
Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.
Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:
Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.
И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1", тогда html-код картинки будет выглядеть примерно так:
<img class=»animate1″ src=»/img/1.jpg»>
Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity, которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X), так как они не поддерживают свойство opacity. Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.
Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами <head> и </head> html-файла нужно добавить следующий css-код:
<style>
img.animate1:hover {
filter: alpha (Opacity=25);/* прозрачность для IE */
opacity: 0.25;/* прозрачность для других браузеров */
}
</style>
На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов <img>, имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:
Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:
img.animate1 {
filter: alpha (Opacity=25);
opacity: 0.25;
}
img.animate1:hover {
filter: alpha (Opacity=100);
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{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— 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 class=»cod»></div>
И добавляем следующие описания стилей:
div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}
И результат:
Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.
Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:
В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position. Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент <a>. Тогда в html-страницу вставляем такой код:
<p align=»center»><a href=»#» class=»rotate2″></a></p>
А в 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 два изображения:
<div class=»animate2″>
<img class=»first» src=»img/1.jpg» />
<img class=»second» src=»img/2.jpg» />
</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);
}
.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
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 эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.