How to apply the pseudo-class :hover to this class: header.main-header .header .social-link > li ? Tried like this: header.main-header .header .social-link > li:hover and like this: .social-link > li:hover , but this class doesn't work (browsers don't see). Tell me please.

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>
  • add html markup - soledar10
  • @ soledar10, added - Valery Emelyanov

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

  • I do not need to change the link themselves, I need li to change when hovering, the background is set there. - Valery Emelyanov