css sprite in wordpress

Question

我创建了一个css sprite，当我将它悬停时显示不同的图像。

在我的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; 
} 

Answer 1

至于说你的HTML是使用半像素invalid
其次，他们不存在
你穿上a的:hover而不是在#jpegx
试试这个：

#jpegx { 
    background-image:url('http://www.pixeltouch.no/wp-content/uploads/2012/03/lena1.png'); 
    background-position: -328.8px 0; /*-328.8px is invalid use -328 or -329*/ 
} 
#jpegx:hover { 
    background-position: 0 0; 
} 

没有测试，但它应该帮助你对你的方式。