Работа с эффектами наведения CSS

Селектор:hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS:hover запускается, когда посетитель наводит указатель мыши на элемент.

Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. К примеру,:link,:active или:visited, который имеет в себя хотя бы один равный атрибут. Так что используйте псевдокласс hover после:link и:visit, но перед:active.

Пример ссылок с различными стилями:

<!DOCTYPE html><html><head><style>a.model1:hover, a.model1:active {color: purple;}a.model2:hover, a.model2:active {font-size: 210%;}a.model3:hover, a.model3:active {background: yellow;}a.model4:hover, a.model4:active {font-family: arial;}a.model5:visited, a.model5:link {text-decoration: none;}a.model5:hover, a.model5:active {text-decoration: underline;}</style></head><body><p>Move your mouse over links to notice the changes.</p><p><a class="model1" href="default.asp">This link will change its color</a></p><p><a class="model2" href="default.asp">This link will change its font-size</a></p><p><a class="model3" href="default.asp">This link will change its background-color</a></p><p><a class="model4" href="default.asp">This link will change its font-family</a></p><p><a class="model5" href="default.asp">This link will change its text-decoration</a></p></body></html>

Пример применения псевдокласса к элементу <span>. Эффект проявляется при наведении курсора на элемент <div>:

<!DOCTYPE html><html><head><style>div { background-color: Gainsboro; padding: 30px; display: none; font-size: 40px;}span:hover + div { display: block;}</style></head><body><span>Please, hover over me!</span><div>This is the expected result</div></body></html>

Выпадающее меню

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

<!DOCTYPE html><html><head><style>div {background-color: Gainsboro;}div a { text-decoration: none; color: black; font-size: 24px; padding: 12px; display:inline-block;}ul { display: inline; margin: 0; padding: 0;}ul li {display: inline-block;}ul li:hover {background: Grey;}ul li:hover ul {display: block;}ul li ul { position: absolute; width: 200px; display: none;}ul li ul li { background: Grey; display: block; }ul li ul li a {display:block;} ul li ul li:hover {background: LightGrey;}</style></head><body><div> <a href="1">Link without hover effect</a> <ul> <li> <a href="1">Link with hover effect(drop-down)</a>      <ul>        <li><a href="1">Bundle 1</a></li>        <li><a href="1">Bundle 2</a></li>        <li><a href="1">Bundle 3</a></li>      </ul>    </li>  </ul></div></body></html>

Другой стиль

Ещё один пример эффекта при наведении, но с иным стилем:

<!DOCTYPE html><html><head><style> body {  align-items: center;  display: flex;  height: 100px;  justify-content: left;}a {  border-bottom: 1px solid Gainsboro;  color: Grey;  padding-bottom:.15em;  text-decoration: none;}a:hover {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift.3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");  background-position: bottom;  background-repeat: repeat-x;  background-size: 30%;  border-bottom: 10;  padding-bottom:.5em;  text-decoration: none;}</style></head><body><a href="#">CSS hover effect</a></body></html>

Нижняя граница становится фоном

Пример, в котором при наведении курсора на ссылку нижняя граница строки увеличивается и становится фоном:

<!DOCTYPE html><html><head><style>:root {  --Color: Khaki;}body {  align-items: center;  display: flex;  font-family: arial;  font-size: 35px;  height: 100vh;  justify-content: center;}a {  background:     linear-gradient(       to bottom, var(--Color) 0%,       var(--Color) 100%);    background-position: 0 100%;    background-repeat: repeat-x;    background-size: 5px 5px;  color: grey;  text-decoration: none;  transition: background-size.2s;}a:hover {  background-size: 4px 50px;}</style></head><body><p>Try not to become a man of success, but rather try  <a href="1">to become a man of value</a></p></body></html>

Уменьшение интенсивности цвета

Эффект:hover, который проявляется уменьшением интенсивности цвета. Это отличный метод привлечь внимание к важному элементу на странице:

<!DOCTYPE html><html><head><link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css"><style type="text/css">body > div     {                         margin:121px 149px;                         width:483px;            height:298px;                         background:#676470;            color:Grey;                         font-family:Lato;            font-weight:900;            font-size:3.4em;                         text-align:center;            line-height:298px;                         transition:all 0.3s;                     }       .decolor        {            opacity:0.5;        }        .decolor:hover        {            opacity:1;        }</style></head><body><div class="decolor">DECOLOR</div></body></html>

Увеличение ширины и высоты

Вы можете использовать свойство transform для увеличения ширины и высоты элемента при наведении курсора:

<!DOCTYPE html><html><head><link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css"><style type="text/css">body > div     {                         margin:121px 149px;            width:483px;            height:298px;            background:#676470;            color:Gainsboro ;            font-family:Helvetica;            font-weight:900;            font-size:3.4em;            text-align:center;            line-height:298px;            transition:all 0.3s;        }        .grow:hover{        -webkit-transform: scale(1.3);        -ms-transform: scale(1.3);        transform: scale(1.3);}</style></head><body><div class="grow">Grow Effect</div></body></html>

Вращение элемента

CSS-преобразования также можно без труда использовать для реализации эффекта вращения элемента

<!DOCTYPE html><html><head><link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css"><style type="text/css">body > div     {                margin:121px 149px;                        width:483px;            height:298px;                        background:#676470;            color:Gainsboro ;                         font-family:Helvetica;            font-weight:900;            font-size:3.4em;                        text-align:center;            line-height:298px;                        transition:all 0.3s;                    }           .rotate:hover{        -webkit-transform: rotateZ(-30deg);        -ms-transform: rotateZ(-30deg);        transform: rotateZ(-30deg);}</style></head><body><div class="rotate">Rotate Effect</div></body></html>

Изменение формы элемента

Ещё один популярный эффект – превращение круглого элемента в квадратный и наоборот

<!DOCTYPE html><html><head><link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css"><style type="text/css">body > div     {                margin:121px 149px;                        width:483px;            height:298px;                        background:#676470;            color:Gainsboro ;            font-family:Helvetica;            font-weight:900;            font-size:48px;                        text-align:center;            line-height:298px;                        transition:all 0.3s;                    }           .circle:hover{        border-radius:70%;}</style></head><body><div class="circle">Square to circle</div></body></html>

Изменение цвета границ

Ещё один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:

<!DOCTYPE html><html><head><link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css"><style type="text/css">body > div     {                margin:121px 149px;                        width:483px;            height:298px;                        background:#676470;            color:Gainsboro ;                         font-family:Helvetica;            font-weight:900;            font-size:48px;                        text-align:center;            line-height:298px;                        transition:all 0.3s;                    }           .border:hover{        box-shadow: inset 0 0 0 25px Lavender ;}</style></head><body><div class="border">BORDER</div></body></html>

Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.

Заключение

CSS3 может создавать несколько красивых эффектов без использования Java Script. Это доказывают приведенные выше примеры.

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

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