When you hover over the picture, it should change to another. But in reality, when you hover the cursor, the hover-picture is enclosed below (I see its outline). Why is this happening and how to fix it? For CSS, if anything, do not scold, I'm still learning. Just on this site.

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

    1 answer 1

    To add a hover style to the :before pseudo-element, you need to write like this in the sss class:hover:before , and then everything works:

     .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; } 
     <ul class="soc_net"> <li><a href="http://vk.com" class="vk"><span>vk</span></a> </li> <li><a href="http://youtube.com" class="ytube"><span>YouTube</span></a> </li> </ul>

    • Yes, the barrel organ started up! Thank you)) - Artur Mark