如何在悬停子元素时更改父项的颜色 [英] How to change color of parent on hover the child element

问题描述

我有一个带有社交链接的div，我想用背景颜色填充整个div，以便根据链接悬停的方式悬停任何具有不同颜色的锚点。

我正在研究如何使用纯CSS填充整个父级的子级背景颜色。

#social {width：400px; height：300px;位置：相对; 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 =facebookhref =＃> <跨度> Facebook和LT; /跨度>< / A><峰; br> < a id =twitterhref =＃> <跨度> Twitter并LT; /跨度>< / A><峰; br> < a id =google-plushref =＃> < span> Google plus< / span>< / a>< br> < a id =instagramhref =＃> < span> Instagram< / span>< / a>< br>< / div>

b $ b

解决方案

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

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

以下是一段代码：

#social {width：400px; height：300px;位置：相对; font-size：36px; font-weight：bold; text-align：center;} a :: after {content：;宽度：100％;身高：100％;位置：绝对; top：0;左：0; z-index：-1; border-radius：20px;背景：透明; transition：background .5s ease;} a：link {text-decoration：none;过渡：color .5s易用性;} 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 =facebookhref =＃> <跨度> Facebook和LT; /跨度>< / A><峰; br> < a id =twitterhref =＃> <跨度> Twitter并LT; /跨度>< / A><峰; br> < a id =google-plushref =＃> < span> Google plus< / span>< / a>< br> < a id =instagramhref =＃> < span> Instagram< / span>< / a>< br>< / div>  

b $ b

I have a div with social links and I want to make background color to fill whole div when hover any anchor with different color depending on which link is hovered.

For now background changes only beneath the anchor text.

I'm researching the way to fill whole parent with child's background color using pure 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>

解决方案

For first sight It looks like another attempt to change style of parent element, but there is a way to achieve the effect using pure CSS.

The way is to use ::after pseudo-selector for anchor elements. We need to define it as absolutely positioned and set up to 100% dimensions of parent. Also to prevent overlapping of siblings, we need to decrease z-index attribute of pseudo-selector to render it beneath text.

Here is a snippet:

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

这篇关于如何在悬停子元素时更改父项的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！