[英]Links Not Clickable
我一直在为一家小型拖车公司开发一个网站,并构建了一个固定在页面左侧的简单社交链接块。 但是,一旦网站上线,链接就无法点击。
一旦鼠标悬停在各个链接上,我似乎无法弄清楚阻止跟随的代码发生了什么。
关于是什么阻止了该功能的任何想法?
HTML 用于链接
<div class="social-share">
<div class="si si-facebook">
<a href="https://facebook.com"></a>
</div>
<div class="si si-email">
<a href="mailto:northcounty_towing@yahoo.com" ></a>
</div>
<div class="si si-phone">
<a href="tel:3604031042"></a>
</div>
</div>
和链接的 CSS
.social-share {
display: flex;
flex-direction: column;
position: fixed;
top: 300px;
left: 0px;
max-height: auto;
max-width: auto;
}
.si-facebook {
display: block;
height: 5vh;
width: 5vh;
background-image: url('../images/facebook-icon.png');
background-size: cover;
margin-top:10px
}
.si-email{
height: 5vh;
width: 5vh;
background-image: url('../images/yahoo.png');
background-size: cover;
margin-top:10px
}
.si-phone{
height: 5vh;
width: 5vh;
background-image: url('../images/phone-icon.png');
background-size: cover;
margin-top:10px
}
<div class="social-share">
<div class="si si-facebook">
<a href="https://www.facebook.com">facebook</a>
</div>
<div class="si si-email">
<a href="mailto:northcounty_towing@yahoo.com" >yahoo</a>
</div>
<div class="si si-phone">
<a href="tel:3604031042">phone</a>
</div>
</div>
那是因为您有一个带有背景图像的 div,但实际的<a>
标签在 div 内,而<a>
标签没有任何名称要显示。 因此,不是单击<a>
标记,而是单击不显示任何操作的 div。
为了工作,您只需在 div 内添加带有background-image
的 div。
然后你的 HTML 看起来像这样:
<div class="social-share">
<a href="https://facebook.com">
<div class="si si-facebook">
</div>
</a>
<a href="mailto:northcounty_towing@yahoo.com" >
<div class="si si-email">
</div>
</a>
<a href="tel:3604031042">
<div class="si si-phone">
</div>
</a>
</div>
或者,如果可能的话,您可以使用图标而不是图像,但在这种情况下,上述答案将很容易。 而已。
祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.