[英]How do I link images with an a tag while applying css to the images?
I'm trying to link my images to their corresponding sites, so I added my images inside an <a>
tag.我正在尝试将我的图片链接到他们相应的网站,所以我在
<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>
and my css is the following:我的 css 如下:
#contact-section > img {
width: 100%;
max-width: 40px;
height: auto;
margin-bottom: 1rem;
}
#contact-section > img:hover {
transform: scale(1.2) rotate(2deg);
}
the result is this:结果是这样的:
What I want the result to be is this:我想要的结果是这样的:
When I remove the <a>
tags, I do get my desired result.当我删除
<a>
标签时,我确实得到了我想要的结果。 It seems like the <a>
tag disregards my img styling. <a>
标签似乎忽略了我的 img 样式。 How do I fix this?我该如何解决?
Try to remove > in CSS尝试删除 CSS 中的 >
#contact-section img {
width: 100%;
max-width: 40px;
height: auto;
margin-bottom: 1rem;
}
#contact-section img:hover {
transform: scale(1.2) rotate(2deg);
}
or remove > and add a tag too或删除 > 并添加标签
#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.