我創建了一個css sprite,當我將它懸停時顯示不同的圖像。css sprite in wordpress
在我的wordpress頁面中使用css sprite,但我似乎無法在內容中找到它。
圖像只是在整個頁面。
任何想法?這是我的網頁[http://www.pixeltouch.no/?p=65][1]
這是HTML
<ul id="toprow">
<li id="orginal"><a href="#"></a></li>
<li id="png"><a href="#"></a></li>
<li id="jpgx"><a href="#"></a></li>
</ul>
<ul id="secondrow">
<li id="bpp2"><a href="#"></a></li>
</ul>
<ul id="thirdrow">
<li id="bpp1"><a href="#"></a></li>
</ul>
<ul id="fourthrow">
<li id="bpp05"><a href="#"></a></li>
</ul>
<ul id="fifthrow">
<li id="bpp025"><a href="#"></a></li>
</ul>
而CSS
#uppg1container{
margin:10px;
padding:0;
}
/*Första raden*/
#toprow {
position:absolute;
}
#toprow li{
list-style-type:none;
position:absolute;
}
#toprow li, #toprow a{
height:212px;
display:block;
}
#orginal{
background:url('lena.png') 0 0;
left:0;
width:212px;
}
#png{
background:url('lena.png') -212px 0;
left:220px;
width:212px;
}
#png a:hover{
background: url('lena.png') 0 0;
}
#jpgx{
background:url('lena.png') -424px 0;
left:440px;
width:212px;
}
#jpgx a:hover{
background: url('lena.png') 0 0;
}
/*Andra raden*/
#secondrow{
position:absolute;
}
#secondrow li{
top:220px;
left:440px;
list-style-type:none;
position:absolute;
}
#secondrow li, #secondrow a{
height:212px;
display:block;
}
#bpp2{
background:url('lena.png') -636px 0;
left:940px;
width:212px;
}
#bpp2 a:hover{
background: url('lena.png') 0 0;
}
/*Tredje raden*/
#thirdrow{
position:absolute;
}
#thirdrow li{
top:440px;
left:440px;
list-style-type:none;
position:absolute;
}
#thirdrow li, #thirdrow a{
height:212px;
display:block;
}
#bpp1{
background:url('lena.png') -848px 0;
left:940px;
width:212px;
}
#bpp1 a:hover{
background: url('lena.png') 0 0;
}
/*Fjärde raden*/
#fourthrow{
position:absolute;
}
#fourthrow li{
top:660px;
left:440px;
list-style-type:none;
position:absolute;
}
#fourthrow li, #fourthrow a{
height:212px;
display:block;
}
#bpp05{
background:url('lena.png') -1060px 0;
left:940px;
width:212px;
}
#bpp05 a:hover{
background: url('lena.png') 0 0;
}
/*Femte raden*/
#fifthrow{
position:absolute;
}
#fifthrow li{
position:absolute;
top:880px;
left:440px;
list-style-type:none;
}
#fifthrow li, #fifthrow a{
height:212px;
display:block;
}
#bpp025{
background:url('lena.png') -1272px 0;
left:940px;
width:212px;
}
#bpp025 a:hover{
background: url('lena.png') 0 0;
}
第一次更正你的html,li標籤應該在ul或ol標籤內 – soju 2012-03-12 13:57:51
它似乎在爲我工作...... lena圖像對懸停狀態作出反應,這不是你要做的嗎? (順便說一句,你有3個UL的相同的ID(整體)。這可能不是什麼導致你的問題,但它仍然是無效的HTML) – Heroes182 2012-03-12 15:21:11
懸停工作正常,它只是圖像遍佈整個頁面,而不是「post」 – Dymond 2012-03-13 13:57:04