Html 当我将鼠标悬停在图像上时，css精灵图像显示但链接URL不显示

我的CSS精灵图像在网站上显示得很好，精灵图像随鼠标悬停而改变，但当我鼠标悬停在图像上时链接URL不起作用。我不确定我做错了什么，但我肯定这可能是一些简单的事情

该网站的URL如下所示：

有问题的图标位于侧边栏中红色目录搜索按钮正下方的左侧

下面是这些精灵按钮的CSS块：

li.facebook-icon, li.twitter-icon{
float: left;
display: block;
margin: 0px 21px;
width: 48px;
height: 48px;
background: url(/images/sprites/facebook_twiter_sprite_sheet.png) no-repeat;
}

li.facebook-icon{
background-position: 0 0;
}

li.facebook-icon:hover{
background-position: 0 -48px ;
}

li.twitter-icon{
background-position: 0 -96px ;
}

li.twitter-icon:hover{
background-position: 0 -144px ;
}

这是我的HTML块：

<ul class="social-icons mobile-social-set">
    <li class="facebook-icon"><a href="http://www.facebook.com/roadworks.manufacturing?ref=tn_tnmn"></a></li>

    <li class="twitter-icon"><a href="http://www.twitter.com/RoadWorksmfg"></a></li>
</ul>

---

顺便说一句，如果我把这个问题的格式弄错了，请原谅。这是我第一篇关于Stackoverflow的帖子和问题。

您的a元素为空

将此添加到css中

.social-icons a {
display: block;
height: 100%;
}