链接不可点击

Question

I have been developing a site for a small towing company and built a simple block of social links that is fixed to the left-hand side of the page. However, once the site is live the links are not clickable.

I cannot seem to sort out what is going on with the code preventing the follow once the mouse is over the individual links.

Any ideas on what is preventing the functionality?

HTML For the Links

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

and the CSS for the links

.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

That is because you have a div with background image in it but the actual <a> tag is inside the div and the <a> tag has no any name to be displayed. So, instead of clicking <a> tag you are clicking the div which shows no action.

For to to work you can simply add the div with background-image inside of the div.

Then your HTML looks like this:

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

OR if possible you can use icons instead of image but in this case the above answer will be easy one. Thats'it.

Good Luck!