Hover su immagini non riesco a replicarlo

[lucaeffe]

Hover su immagini non riesco a replicarlo

Ho estrapolato un codice CSS da un sito con un effetto che mi interessava.
L'effetto è un hover su di una immagine che funge da link.
In pratica al passaggio del mouse un immaggine si sovrappone a quella di default nella pagina.

Modificando il codice nella pagina stessa riesco a customizzare gli effetti a mio piacimento ma se voglio portarli in una nuova pagina non ci riesco.
Posto il codice magari riuscite a vedere qualche errore che io non vedo?

		<!-- slider-->
		<div id="promo_panel">
			<ul id="promo_nav">
				<li class="prev"><a href="#" title="Scroll left">Previous</a></li>
				<li class="next"><a href="#" title="Scroll right">Next</a></li>
			</ul>
			
            
 
		<!--/slider -->

/*---------------------
	NEXT AND PREVIOUS
*/

#promo_nav li{
	display:block;
	position:absolute;
	top:118px;
	width:76px;
	height:76px;
	z-index:200;
} li.prev{
	background-image:url(PREV.png);
	background-repeat:no-repeat;
	margin:0 0 0 -100px;
	z-index:1;
	
} li.next{
	background-image:url(NEXT.png);
	background-repeat:no-repeat;
	margin:0 0 0 820px;
	z-index:1;
	
}
 li a{
	display:block;
	width:30px;
	height:100%;
	text-indent:-5000px;
	outline:none;

} li.prev a{
	background-position:left bottom;
	outline:none;
} li.prev a:hover{
	background-position:left top;
	background-image:url(PREV_hover.png);
	background-repeat:no-repeat;
	outline:none;
} li.next a{
	background-position:right bottom;
	outline:none;
} li.next a:hover{
	background-position:right top;
	background-image:url(NEXT_hover.png);
	background-repeat:no-repeat;
	outline:none;
}

[n1gh7]

Sicuro che nella nuova pagina ci sia la classe giusta all'immagine di link e che venga caricato il foglio di stile nella pagina?