Use rollover images in Next/Previous Links

For all of those who has got problems like me, i want to share this simple solution to make it works.

The common problem is that we want to add our CSS code in <a> tag, actually, we need to add it into a <div> tag and use the div:hover.

This is our next_post_link:

<?php previous_post_link('%link','<div class="arrowsr"></div>'); ?>

The CSS trick:

.arrows, .arrowsl, .arrowsr {background: url('img/arrows.gif') no-repeat 0 0; width: 50px; height: 50px; display: block;}
div.arrowsr {background-position: left bottom;}
div:hover.arrowsr {background-position: left top;}

And last but not least, this will prevent the mess when the user reach the last/first post, the solution, here:

Hope this will may be usefull.

Huroman