How to change only the y-as on hover?

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.

If that is the only way, then I do it with css only and create for each format an hover style... — Caspert, Jan 09 '16 at 16:16
If i understood correctly you need background-position to change on hover for each `format` but you want to do it with one `.format:hover` line of css. I don't think you can do it with just css, but i am not sure. — Nenad Vracar, Jan 09 '16 at 16:20
Yes exactly and ok.. Maybe someone else and otherwise I create simple for each one a hover state.. — Caspert, Jan 09 '16 at 16:22

score 2 · Answer 1 · edited May 23 '17 at 12:15

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>

ichigolas · Accepted Answer · 2016-01-09T16:36:23.313

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>

How to change only the y-as on hover?

2 Answers2