将锚文本转成白色，但当鼠标触摸到它的容器盒时，就在我悬停在它上面之前
将锚文本转成白色，但当鼠标触摸到它的容器盒时，就在我悬停在它上面之前
提问于 2020-04-05 20:14:56
我想要完成的是，当我悬停在电子邮箱容器上时，它会在我实际悬停在链接上之前，将锚标签转成白色。我想把链接和它嵌套的框组合在一起。
相反，我得到的是当我悬停在框上时，锚文本仍然是黑色的，只有在我悬停在文本上之后，它才会变成白色。
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
font-size: 16px;
color: #444352;
font-family: 'Questrial', sans-serif;
font-weight: 300;
line-height: 1.5;
}
/* HEADER */
.header {
height: 40em;
margin: 10em 5em 0;
}
.header h1 {
padding: 0 0 70px 0;
font-size: 2.5rem;
letter-spacing: 0.05rem;
font-weight: 300;
}
.header p {
font-size: 2.3rem;
font-weight: 400;
max-width: 710px;
line-height: 3.5rem;
letter-spacing: 0.01rem;
}
.header-email a {
text-decoration: none;
color: #444352;
font-size: 0.6em;
letter-spacing: 0.06em;
}
.header-email a:hover {
color: #F8F8FF;
}
.header h3 {
padding-top: 50px;
letter-spacing: .1rem;
}
.underline--magical {
background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
background-repeat: no-repeat;
background-size: 100% .1em;
background-position: 0 80%;
transition: background-size .2s ease-in-out;
display: inline-block;
padding: 0 5px;
}
.underline--magical:hover {
background-size: 100% 70%;
}<section class="header">
<p class="header-email underline--magical puff-in-ver">
<a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
</p>
</section>
我试着把白色文本应用到悬停背景上，但没有运气。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-05 20:18:31
您需要使用以下选择器：.underline--magical:hover a
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
font-size: 16px;
color: #444352;
font-family: 'Questrial', sans-serif;
font-weight: 300;
line-height: 1.5;
}
/* HEADER */
.header {
height: 40em;
margin: 10em 5em 0;
}
.header h1 {
padding: 0 0 70px 0;
font-size: 2.5rem;
letter-spacing: 0.05rem;
font-weight: 300;
}
.header p {
font-size: 2.3rem;
font-weight: 400;
max-width: 710px;
line-height: 3.5rem;
letter-spacing: 0.01rem;
}
.header-email a {
text-decoration: none;
color: #444352;
font-size: 0.6em;
letter-spacing: 0.06em;
}
.header-email a:hover {
transition: color .5s;
}
.header h3 {
padding-top: 50px;
letter-spacing: .1rem;
}
.underline--magical {
background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
background-repeat: no-repeat;
background-size: 100% .1em;
background-position: 0 80%;
transition: background-size .2s ease-in-out;
display: inline-block;
padding: 0 5px;
}
.underline--magical:hover {
background-size: 100% 70%;
}
.underline--magical:hover a {
color: #F8F8FF;
}<section class="header">
<p class="header-email underline--magical puff-in-ver">
<a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
</p>
</section>
Stack Overflow用户
发布于 2020-04-05 20:21:55
您应该在css中添加一个.header:hover . .header:hover ..header:hover--神奇的代码
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body,
html {
width: 100%;
font-size: 16px;
color: #444352;
font-family: 'Questrial', sans-serif;
font-weight: 300;
line-height: 1.5;
}
/* HEADER */
.header:hover a{
color: #F8F8FF;
}
.header:hover .underline--magical{
background-size: 100% 70%;}
.header {
height: 40em;
margin: 10em 5em 0;
}
.header h1 {
padding: 0 0 70px 0;
font-size: 2.5rem;
letter-spacing: 0.05rem;
font-weight: 300;
}
.header p {
font-size: 2.3rem;
font-weight: 400;
max-width: 710px;
line-height: 3.5rem;
letter-spacing: 0.01rem;
}
.header-email a {
text-decoration: none;
color: #444352;
font-size: 0.6em;
letter-spacing: 0.06em;
}
.header h3 {
padding-top: 50px;
letter-spacing: .1rem;
}
.underline--magical {
background-image: linear-gradient(120deg, #007BFF 0%, #007BFF 100%);
background-repeat: no-repeat;
background-size: 100% .1em;
background-position: 0 80%;
transition: background-size .2s ease-in-out;
display: inline-block;
padding: 0 5px;
}<section class="header">
<p class="header-email underline--magical puff-in-ver">
<a href="mailto:firstlast88@gmail.com" target="_blank" title="email">firstlast88@gmail.com</a>
</p>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61048882
复制相关文章
相似问题
腾讯云开发者
