Question

我有一个带社交链接的div，我希望在悬停任何不同颜色的锚时根据哪个链接悬停来制作背景颜色以填充整个div。

现在仅在锚文本下面进行背景更改。

我正在研究使用纯CSS为孩子的背景颜色填充整个父母的方法。

＆＃13;

{"errno":-2,"code":"ENOENT","syscall":"open","path":"./public/owner_photo/f28397baea8fb4d6f6dafed9f5586a9ac0b46843acf1120a0ecad24755cfff57.jpeg"}

＆＃13;

#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;
}

＆＃13;

Answer 1

乍一看它看起来像是另一种改变父元素样式的尝试，但有一种方法可以使用纯CSS实现效果。

方法是对锚元素使用::after伪选择器。我们需要将其定义为绝对定位并设置为父级的100％维度。另外，为了防止兄弟姐妹重叠，我们需要减少伪选择器的z-index属性，使其在文本下方呈现。

这是一个片段：

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

如何在悬停子元素时更改父级的颜色

1 个答案: