html – hover not working properly

Question:

When you hover over the image, it should change to another one. But in reality, when you hover over the hover-image, it is placed below (I see its outline). Why is this happening and how to fix it? For CSS, if anything, do not scold me, 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>

Answer:

To style the hover pseudo-element :before , you need to write this in css 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>
Post Views: 0
Scroll to Top