Как применить псевдокласс :hover

530

29 декабря 2016, 06:30

Как применить псевдокласс :hover к такому классу: header.main-header .header .social-link > li? Пробовал вот так: header.main-header .header .social-link > li:hover и вот так: .social-link > li:hover , но не срабатывает такой класс (браузеры не видят). Подскажите пожалуйста.

html:

<ul class="social-link">
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы на Linked In"><i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы на Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Twitter"><i class="fa fa-twitter "></i></a></li>
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Вконтакте"><i class="fa fa-vk"></i></a></li>
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Google Plus"><i class="fa fa-google-plus"></i></a></li>
<li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Одноклассниках"><i class="fa fa-odnoklassniki"></i></a></li>
                                                                                                    </ul>

Answer 1

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
.social-link { 
  text-align: center; 
} 
.social-link > li { 
  display: inline-block; 
  vertical-align: top; 
  margin: 15px 0; 
} 
.social-link > li a { 
  display: block; 
  width: 50px; 
  height: 50px; 
  line-height: 50px; 
  border: 1px solid #ccc; 
  font-size: 25px; 
  color: #ccc; 
  transition: .3s; 
  border-radius: 50%; 
  position: relative; 
} 
.social-link > li a:before { 
  content: ''; 
  position: absolute; 
  top: -2px; 
  left: -2px; 
  width: 100%; 
  height: 100%; 
  border: 2px solid transparent; 
  border-top: 2px solid royalblue; 
  opacity: 0; 
  border-radius: 50%; 
} 
.social-link > li a:hover:before { 
  opacity: 1; 
  animation: animSocialBorder 1s linear infinite; 
} 
.social-link > li:hover a { 
  color: tomato; 
} 
@keyframes animSocialBorder { 
  0% { 
    transform: rotate(0deg); 
  } 
  100% { 
    transform: rotate(360deg); 
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
<ul class="social-link"> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы на Linked In"><i class="fa fa-linkedin"></i></a> 
  </li> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы на Facebook"><i class="fa fa-facebook"></i></a> 
  </li> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Twitter"><i class="fa fa-twitter "></i></a> 
  </li> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Вконтакте"><i class="fa fa-vk"></i></a> 
  </li> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Google Plus"><i class="fa fa-google-plus"></i></a> 
  </li> 
  <li><a target="_blank" href="#" data-toggle="tooltip" title="" data-original-title="Мы в Одноклассниках"><i class="fa fa-odnoklassniki"></i></a> 
  </li> 
</ul>