hover работает неправильно

#html #css #hover

При наведении курсора на картинку она должна меняться на другую. А в реальности при
наведении курсора hover-картинка подкладывается снизу (я вижу ее контур). Почему так
происходит и как это исправить? За CSS, если что, не ругайте, я пока учусь. Как раз
на этом сайте.



.soc_net {	
  -webkit-padding-start: 0;
  margin: 30px 0 0 0;
}
.soc_net a {
  display: block;
}
.soc_net li{
  display: inline-block;
  margin: 0 1px;
}
.soc_net span{
  display: none;
}
.soc_net .vk:before {
  cursor: pointer;
  background-image: url(vk.png);
}
.soc_net .insta:before {
  background-image: url(insta.png);
}
.soc_net .fb:before {
  background-image: url(fb.png);
}
.soc_net .ytube:before {
  background-image: url(ytube.png);
} 
.soc_net .vk:hover {
  background-image: url(ytube.png);
}
.soc_net .insta:hover {
  background-image: url(ytube.png);
}
.soc_net .fb:hover {
  background-image: url(ytube.png);
}
.soc_net .ytube:hover {
  background-image: url(fb.png);
} 
.soc_net a:before {
  content:'';
  display:block;
  width:48px;
  height:48px;
}

  
vk
  
inst
  
facebook
  
YouTube




    

Ответы

Ответ 1

Чтобы добавить стиль для hover псевдоэлементу :before, нужно писать так в сss class:hover:before,
и тогда всё работает:



.soc_net {
  -webkit-padding-start: 0;
  margin: 30px 0 0 0;
}
.soc_net a {
  display: block;
}
.soc_net li {
  display: inline-block;
  margin: 0 1px;
}
.soc_net span {
  display: none;
}
.soc_net .vk:before {
  cursor: pointer;
  background-image: url(http://mighty.su/images/149_vk.png);
}
.soc_net .ytube:before {
  background-image: url(http://quest-city.com/wp-content/uploads/2016/04/YouTube.png);
}
.soc_net .vk:hover:before {
  background-size: 100% 100%;
  background-image: url(http://quest-city.com/wp-content/uploads/2016/04/YouTube.png);
}
.soc_net .ytube:hover:before {
  background-image: url(http://mighty.su/images/149_vk.png);
}
.soc_net a:before {
  content: '';
  display: block;
  background-size: 100% 100%;
  width: 48px;
  height: 48px;
  transition: all 0.3s ease;
}

  
vk
  
  
YouTube