[英]How do I link images with an a tag while applying css to the images?
我正在尝试将我的图片链接到他们相应的网站,所以我在<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 样式。 我该如何解决?
尝试删除 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.