Как расширить цвет фона элемента при зависании, чтобы заполнить весь родитель

Question

У меня есть div с социальными ссылками, и я хочу сделать цвет фона, чтобы заполнить весь div, когда наведите любой якорь с другим цветом в зависимости от того, какая ссылка зависла.

В настоящее время изменения фона только под текстом привязки.

Я изучаю способ заполнить весь родитель цветом фона ребенка, используя чистый CSS.

#social { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    transition: all .5s ease; 
 
} 
 
a:hover { 
 
    color: white; 
 
} 
 
#facebook:hover { 
 
    background: #3b5998; 
 
} 
 
#twitter:hover { 
 
    background: lightblue; 
 
} 
 
#google-plus:hover { 
 
    background: tomato; 
 
} 
 
#instagram:hover { 
 
    background: lightgreen; 
 
}

<div id="social"> 
 
       <a id="facebook" href="#"> <span>Facebook</span></a><br> 
 
       <a id="twitter" href="#"> <span>Twitter</span></a><br> 
 
       <a id="google-plus" href="#"> <span>Google plus</span></a><br> 
 
       <a id="instagram" href="#"> <span>Instagram</span></a><br> 
 
</div>

Answer 1

Для первого взгляда это выглядит как еще одна попытка изменить стиль родительского элемента, но есть способ для достижения эффекта с использованием чистого CSS.

Способ использования ::after псевдо-селектор для якорных элементов. Нам нужно определить его как абсолютно позиционированное и установить до 100% размеров родителя. Кроме того, чтобы предотвратить совпадение братьев и сестер, нам нужно уменьшить атрибут псевдоселектора , чтобы отобразить его под текстом.

Вот отрывок:

#social { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    font-size: 36px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
a::after{ 
 
    content: " "; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    border-radius: 20px; 
 
    background: transparent; 
 
    transition: background .5s ease; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    transition: color .5s ease; 
 
} 
 
a:hover { 
 
    color: white; 
 
} 
 
#facebook:hover::after { 
 
    background: #3b5998; 
 
} 
 
#twitter:hover::after { 
 
    background: lightblue; 
 
} 
 
#google-plus:hover::after { 
 
    background: tomato; 
 
} 
 
#instagram:hover::after { 
 
    background: lightgreen; 
 
}

<div id="social"> 
 
       <a id="facebook" href="#"> <span>Facebook</span></a><br> 
 
       <a id="twitter" href="#"> <span>Twitter</span></a><br> 
 
       <a id="google-plus" href="#"> <span>Google plus</span></a><br> 
 
       <a id="instagram" href="#"> <span>Instagram</span></a><br> 
 
</div>