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

0 ∞

Селектор :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>
Потрясающие эффекты наведения на CSS

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

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

<!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>
Нужны кнопки для сайта? 50 примеров CSS3 кнопок с эффектами и анимацией

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

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

<!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">
<style>
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">
<style>
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>
Работа с flexbox

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

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

<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
<style>
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">
<style>
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">
<style>
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. Это доказывают приведенные выше примеры.

Вадим Дворниковавтор-переводчик статьи «Working with CSS Hover Effects»

Пожалуйста, опубликуйте свои отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!