如何在将 css 应用于图像时将图像与 a 标签链接？

Question

我正在尝试将我的图片链接到他们相应的网站，因此我将我的图片添加到了 <a> 标记中。

 <section id="contact-section">
     <h2 class="section-heading">Talk to us</h2>
     <p>Reach us via <span><a href="mailto:info@example.com">Email</a></span> or follow us on social icons below. Thank you.</p>

      <a href="https://www.facebook.com/" target="_blank">
          <img src="images/facebook.png" alt="facebook icon">
      </a>

      <a href="https://twitter.com/" target="_blank">
          <img src="images/twitter.png" alt="twitter icon">
      </a>

      <a href="https://www.instagram.com/" target="_blank">
          <img src="images/instagram.png" alt="instagram icon">
      </a>

      <a href="https://www.pinterest.com/" target="_blank">
          <img src="images/pinterest.png" alt="pinterest icon">
      </a>
 </section>

我的css如下：

#contact-section > img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section > img:hover {
    transform: scale(1.2) rotate(2deg);
}

结果是这样的：

我想要的结果是这样的：

当我删除<a> 标签时，我确实得到了我想要的结果。 <a> 标签似乎忽略了我的 img 样式。我该如何解决这个问题？

Answer 1

尝试删除 CSS 中的 >

#contact-section img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section img:hover {
    transform: scale(1.2) rotate(2deg);
}

或删除 > 并添加标签

#contact-section a img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section a img:hover {
    transform: scale(1.2) rotate(2deg);
}