当我将鼠标悬停在它上面时，为什么我所有的联系链接都会向下移动...我只想移动一个

Question

我希望我的页面的联系部分具有指向我的社交的链接。我将: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>

Answer 1

你写了span:hover，它包含了所有的span元素，我使用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>

Answer 2

由于元素的大小通过 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;
}

但是，由于影响范围很大，所以最好将代码范围缩小一点。