Question

I have a link, with which i want use plus, which will change color on hover.

But in the past hour i cant figure out how to do this trick with spites.

Here is a link, nothing special

<a href="detailed.html" class="plus">Find Out More!</a>

My css code

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    padding-left: 25px;
}

.block a.plus:hover{
    /*Just for example*/
    background-position: -15px -1px;
}

And also plus img

Answer 1

CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:

<a href="detailed.html" class="plus">
    <span>Find Out More!</span>
</a>

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    display: inline-block;
    padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
    /*Just for example*/
    background-position: 0 -16px;
}   
.block a.plus span{
    background-color: #fff;
}

If you don’t want to use a second element you should rearrange your icons.