CODEWITHSUNDEEP
csscss-transforms
mpn
mpn

Reputation: 1018

Css3 Translate on child element doesn't work

Here is my css:

#sort_dropdown:hover > .arrow{
    -webkit-transform: translate(0,-42px);
    -moz-transform: translate(0,-42px);
    -o-transform: translate(0,-42px);
    transform: translate(0,-42px);

}

here is my code:

<li><a id="sort_dropdown">Sortieren <span class="arrow">&darr;</span><span class="arrow" style="display: none;">&uarr;</span></a>

Upvotes: 3

Views: 6909

Answers (1)

Barney
Barney

Reputation: 16456

Transforms only work on elements with block-level display. Setting .arrow to display: inline-block (spans display inline by default) does the trick (jsFiddle demo):

.arrow {
    display: inline-block;
}

Upvotes: 12

Related Questions