CSS定位帮助（精灵）

Question

我在这里创造了一个小提琴：

http://jsfiddle.net/ozzy/77dJz/

不知怎的（请注意它早上4:30）我已经在facebook链接上竖起了悬停效果..

Twitter有人工作......只是不确定我做错了什么。

任何帮助表示赞赏，我累了哈哈。

迭代：

CSS：

#facebook {
    background:url('../images/socialsprite.png') no-repeat scroll 0px 0px transparent;
    height:40px;
    width:180px;
    margin-left:10px;
    margin-top:30px;
}
#facebook:hover {
    background:url('../images/socialsprite.png') no-repeat scroll 0px -40px transparent;
    height:40px;
    width:180px;
}
#twitter {
    background:url('../images/socialsprite.png') no-repeat scroll -180px 0px transparent;
    height:40px;
    width:180px;
    margin-left:210px;
    margin-top:-40px;
}
#twitter:hover {
    background:url('../images/socialsprite.png') no-repeat scroll -180px -40px transparent;
    height:40px;
    width:180px;
}

干杯

需要Twitter和脸谱精灵并排坐在主div中水平居中

Answer 1

您需要做的是float您的divs所以他们不会互相掩饰。

这是一些简化的CSS。根据需要修改margin。

#facebook {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll 0px 0px transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;     
}
#facebook:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll 0px -40px transparent;
}
#twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll -180px 0px transparent;
height:40px;
width:180px;
float:right;
margin:25px 10px;    
}
#twitter:hover {
background:url('http://sitehelp.com.au/images/socialsprite.png') 
no-repeat scroll -180px -40px transparent;
}

http://jsfiddle.net/jasongennaro/77dJz/3/

修改

您可以按如下方式进一步简化CSS：

#facebook, #twitter {
background:url('http://sitehelp.com.au/images/socialsprite.png') no-repeat scroll transparent;
height:40px;
width:180px;
float:left;
margin:25px 10px;     
}
#facebook:hover {
background-position:0px -40px;
}

#twitter {
background-position:-180px 0px;
float:right;
}
#twitter:hover {
background-position: -180px -40px;
}

http://jsfiddle.net/jasongennaro/77dJz/4/

Answer 2

引用： “......不确定我做错了什么。”

问题是您的Twitter <div>覆盖了您的Facebook <div>。

简单地删除Twitter <div>让你的Facebook <div>再次工作......

如果你想要并排<div>，你需要浮动它们。

这是有效的......

http://jsfiddle.net/77dJz/2/