css: avoid image hover first time blinking

Question

I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.

When hovered, it

Answer 1

The "double up the original background image" trick didn't work for me so I used another css trick:

.next {
    background: url(../images/next.png) center center no-repeat;        
}
.next:hover {
    background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
    content: url(../images/next-hover.png);
    display: none;
}