Question

我的CSS精灵图片在网站上显示正常，精灵图片随悬停而变化，但当我将鼠标悬停在图片上时，链接网址无效。不确定我做错了什么，但我确信它可能很简单。

网站的网址如下：

www.roadworksmfg.com

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

这是我的这些精灵按钮的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的第一篇文章和问题。

Answer 1

你的元素是空的。

将此添加到您的css

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

css sprite图像显示但是：当我将鼠标悬停在图像上时，链接网址没有显示

1 个答案: