3

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>
JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
mpn
  • 1,000
  • 1
  • 13
  • 33

1 Answers1

12

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;
}
Barney
  • 16,181
  • 5
  • 62
  • 76
  • 2
    I found that transforms work with `display:flex` too ...and that's when I became aware that [flex is block-level (unless inline-flex)](https://teamtreehouse.com/community/does-display-flex-change-block-elements-to-be-inline-elements). – Mentalist Apr 19 '19 at 08:09