Работа с эффектами наведения 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>

0

Пример применения псевдокласса к элементу <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>

0

Содержание

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

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

<!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>

0

Другой стиль

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

<!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>

0

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

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

<!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>

0

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

Эффект :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>

0

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

Вы можете использовать свойство 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>

0

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

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>

0

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

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

<!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>

0

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

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

<!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>

0

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

Заключение

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

Данная публикация представляет собой перевод статьи «Working with CSS Hover Effects» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню