我希望我的页面的联系部分包含指向我的社交媒体的链接。我将 :hover
应用到我的 span
类以使其向上移动 5px。虽然当我将鼠标悬停在所需的链接上时,我的所有链接都会向下移动...我做错了什么,请有人帮忙...代码如下。
#contact {
background: linear-gradient(0deg, rgb(235, 216, 247) 20%, var(--color-primary) 80%);
height: 30vh;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.contact-section {
text-align: center;
padding-top: 100px;
}
.contact-section-header {
display: block;
justify-content: center;
}
.contact-section-header h2 {
font-family: var(--text-primary), sans-serif;
font-size: 2rem;
text-align: center;
justify-content: center;
letter-spacing: 2px;
border-bottom: 0.1rem solid var(--color-secondary);
border-width: 1px;
margin: 0 45% 0.7rem;
}
.contact-section-header p {
font-family: var(--text-primary);
text-align: center;
}
.contact-links {
margin: 0;
padding-top: 35px;
justify-content: center;
display: flex;
flex-direction: row;
}
.contact-links i {
color: rgb(204, 49, 173);
margin-right: 20px;
border-radius: 20px;
}
.ig-blanket-link,
.ig-hair-link,
.fb-link-span,
.fcc-link-span {
font-family: var(--text-primary);
font-size: 2.4rem;
transition: all 200ms ease;
position: relative;
display: flex;
flex-direction: row;
}
.ig-blanket-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
.ig-hair-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
.fb-link-span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
}
span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
padding-bottom: 5px;
}
.contact-links a {
display: flex;
margin:auto;
text-align: center;
text-decoration: none;
color: black;
}
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Contact Me!</h2>
<p class="social-p">Links To My Socials Are Below:</p>
</div>
<div class="contact-links">
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-blanket-link"><i class="fab fa-instagram"></i>My Blanket Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-hair-link"><i class="fab fa-instagram"></i>My Hair Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="fb-link-span"><i class="fab fa-facebook-f"></i>My Facebook Page</span>
</a>
<a
id="profile-link"
href="#"
target="_blank"
class="contact-details"
><span class="fcc-link-span"><i class="fab fa-free-code-camp"></i>freeCodeCamp.org</span>
</a>
</div>
答案 0 :(得分:2)
你写了 span:hover
并且它包含所有的 span 元素,我使用了 transform: translatey(-5px);
而不是 padding
#contact {
background: linear-gradient(0deg, rgb(235, 216, 247) 20%, var(--color-primary) 80%);
height: 30vh;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.contact-section {
text-align: center;
padding-top: 100px;
}
.contact-section-header {
display: block;
justify-content: center;
}
.contact-section-header h2 {
font-family: var(--text-primary), sans-serif;
font-size: 2rem;
text-align: center;
justify-content: center;
letter-spacing: 2px;
border-bottom: 0.1rem solid var(--color-secondary);
border-width: 1px;
margin: 0 45% 0.7rem;
}
.contact-section-header p {
font-family: var(--text-primary);
text-align: center;
}
.contact-links {
margin: 0;
padding-top: 35px;
justify-content: center;
display: flex;
flex-direction: row;
}
.contact-links i {
color: rgb(204, 49, 173);
margin-right: 20px;
border-radius: 20px;
}
.ig-blanket-link,
.ig-hair-link,
.fb-link-span,
.fcc-link-span {
font-family: var(--text-primary);
font-size: 2.4rem;
transition: all 200ms ease;
position: relative;
display: flex;
flex-direction: row;
}
.ig-blanket-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
transform: translatey(-5px);
}
.ig-hair-link:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
transform: translatey(-5px);
}
.fb-link-span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
transform: translatey(-5px);
}
.fcc-link-span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
transform: translatey(-5px);
}
.contact-links a {
display: flex;
margin:auto;
text-align: center;
text-decoration: none;
color: black;
}
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Contact Me!</h2>
<p class="social-p">Links To My Socials Are Below:</p>
</div>
<div class="contact-links">
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-blanket-link"><i class="fab fa-instagram"></i>My Blanket Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="ig-hair-link"><i class="fab fa-instagram"></i>My Hair Page</span>
</a>
<a
href="#"
target="_blank"
class="contact-details"
><span class="fb-link-span"><i class="fab fa-facebook-f"></i>My Facebook Page</span>
</a>
<a
id="profile-link"
href="#"
target="_blank"
class="contact-details"
><span class="fcc-link-span"><i class="fab fa-free-code-camp"></i>freeCodeCamp.org</span>
</a>
</div>
答案 1 :(得分:1)
由于padding-bottom增加了元素的大小,其他元素也会受到影响。 一旦将 padding-top: 5px 设置为更改前的状态,如下所示,它将起作用。
span{
padding-top: 5px;
}
span:hover {
color: var(--color-secondary);
transition: all 200ms ease-in;
padding-top: 0px;
padding-bottom: 5px;
}
不过,由于影响范围较大,可能还是把代码缩小一点比较好。