如何在对图像应用 css 时 link 带有标签的图像？

Question

我正在尝试 link 我的图片到相应的网站，所以我将我的图片添加到 <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);
}

如何在对图像应用 css 时 link 带有标签的图像？

How do I link images with an a tag while applying css to the images?

html

css

image

atag