链接不可点击

Question

我一直在为一家小型拖车公司开发一个网站，并构建了一个固定在页面左侧的简单社交链接块。但是，一旦网站上线，链接就无法点击。

一旦鼠标悬停在各个链接上，我似乎无法弄清楚阻止跟随的代码发生了什么。

关于是什么阻止了该功能的任何想法？

链接的 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
}

Answer 1

<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>

Answer 2

那是因为你有一个带有背景图像的 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>

或者，如果可能的话，您可以使用图标而不是图像，但在这种情况下，上述答案将很简单。就是这样。

祝你好运！