При наведении курсора на картинку она должна меняться на другую. А в реальности при наведении курсора 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;
}
Ответ
Чтобы добавить стиль для 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;
}
Комментариев нет:
Отправить комментарий