How to change only the y-as on hover? - html

Question

I use a image sprite for each post type. I call a image by using:
The markup that I am using is:
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
}
span.format:hover {
background: #FFF url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 bottom;
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
As you can see it will display three icons. When you hover over one span, the background change to white and the icon to red. The only problem is that .format:hover use the same x-as as for the normal state. I can create for each format type an hover state css, but I was wondering if it is also possible with only one hover, where the x-as will be the one of that format. Is this possible?
Thanks in advance.

Answer 1

When you update the background property on hover, you will actually have to redeclare all the x- and y- positions for each link element individually. background is simply a shorthand property and therefore will not intelligently "merge" with any exisitng background property values, but override it.
You can of course use background-position-y to override only the y positioning of the element, but it is not supported in some browsers. It is only recently (ca. 2014) introduced to the W3C specifications. An alternative would be using pseudo-elements, but I consider the solution posted by #nicooga as the best.
With regards to the pseudo-element solution, you can do it as follow:
The trick is to double the height of the pseudo-element (using bottom: -100%), and then moving the pseudo-element upwards by its own height (using top: -100%) on hover. In that case, you will only have to declare your background positions once for all your elements.
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float: left;
position: relative;
overflow: hidden;
}
.format::before {
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
content: '';
display: block;
position: absolute;
top: 0;
bottom: -100%;
left: 0;
right: 0;
}
span.format:hover::before {
background-color: #fff;
top: -100%;
bottom: 0;
}
.format.image::before {
background-position: 0 0;
}
.format.location::before {
background-position: -60px 0;
}
.format.text::before {
background-position: -120px 0;
}
.format.profile::before {
background-position: -180px 0;
}
.format.sound::before {
background-position: -240px 0;
}
.format.link::before {
background-position: -300px 0;
}
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>

Answer 2

The background property is a short hand to set a bunch of other properties.
When you use it again in span.format:hover you are overriding some of the properties that make it look like you want. Just change the properties you need.
Use this as a rule of thumb: if you are repeating code you are probably doing something wrong.
http://www.w3schools.com/cssref/css3_pr_background.asp
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background-image: url("http://i.imgur.com/sVTJJMV.png");
background-color: rgb(215, 53, 74);
}
span.format:hover {
background-position-y: 100%;
background-color: rgb(255, 255, 255);
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>