CSS定位幫助（sprite）

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和facebook精靈在主div中水平居中並排放置

Answer 1

您需要做的是使divs float以使它們不會互相覆蓋。

這是一些簡化的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

Quote： “ ...不確定我做錯了什么。”

問題在於您的Twitter <div>正在覆蓋您的Facebook <div> 。

只需刪除Twitter <div>即可使您的Facebook <div>重新工作...

如果要並排<div> ，則需要浮動它們。

這正在工作...

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