CODEWITHSUNDEEP
csscss-sprites
NoNameZ
NoNameZ

Reputation: 795

CSS sprite position

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

Plus

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 enter image description here

Upvotes: 0

Views: 241

Answers (2)

sven
sven

Reputation: 13

You can achieve this with the :before selector.

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

a.plus {
    position: relative;
    padding-left: 25px;
}

a.plus:before {
    position: absolute;
    left: 0;
    content: " ";
    width: 15px;
    height: 15px;
    background: red url("images/plus.png") 10px 0 no-repeat;
}
​

The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).

Upvotes: 0

Zeta
Zeta

Reputation: 105886

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.

Upvotes: 1

Related Questions