javascript - 当我将鼠标悬停在它上面时,为什么我所有的联系链接都会向下移动...我只想移动一个
问题描述
我希望我的页面的联系部分具有指向我的社交的链接。我申请: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>
解决方案
你写span:hover
的,包括所有的跨度元素,我用transform: translatey(-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;
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>
推荐阅读
- ios - 如何将base64String中的EC转换为SecKey
- python - 如何查看禁止某人的用户的名称?
- java - 这个错误在运行我的代码时向我显示,“找不到或加载主类 XX:MaxPermSize=1024m”是什么意思?
- ios - 如何从geometryReader 中删除动画?
- apache-spark - withColumn.otherwise 的顺序是否有保证?
- python - python中的3D绘图,z轴的帮助
- r - Shiny - 导出通过 renderUI 动态创建的多个图形
- ontology - 推理一个相当大的本体
- reactjs - React ScrollToTop 组件问题:它应该可以工作,但它没有
- ms-access-2016 - 访问报告 - 仅当表达式中的 extendedFreight > 0 时才对 frtTons 求和