При наведении курсора на картинку она должна меняться на другую. А в реальности при наведении курсора 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;
}
<ul class="soc_net">
<li><a href="http://vk.com" class="vk"><span>vk</span></a></li>
<li><a href="http://instagram.com" class="insta"><span>inst</span></a></li>
<li><a href="http://facebook.com" class="fb"><span>facebook</span></a></li>
<li><a href="http://youtube.com" class="ytube"><span>YouTube</span></a></li>
</ul>