悬停时翻译链接内的元素

Question

我正在尝试使用 CSS3 转换将对象水平向右平移。这似乎很简单，但也许我错过了什么......

这就是我所拥有的：

<h1>
    <a href="#" class="qa">Check Q&amp;A<i class="icon-right-open-gal"></i></a>
</h1>

i 是一个放置有精灵的图像。一旦链接悬停，我希望这个元素水平向右移动。

.qa{

  &:link,&:visited{
    padding: 10px;
    text-decoration: none;
    color: #f2f2f2;
    font-size: 18px;
    // @include background-image(linear-gradient(bottom, #42BA70, #49CB7A));
    background-color: #E3560D;
    @include box-shadow(inset 1px 1px rgba(255,199,170,0.5));
    @include box-sizing(border-box);
    text-transform: uppercase;
    @include transition-property(all);
    @include transition-duration(0.2s);
    @include transition-timing-function(ease-in-out);

    i{
    font-size: 13px;
    }

    span{
      font-family: helvetica-neue, helvetica, serif;
      font-size: 15px;
    }
  }


  &:hover, &:active{
    background-color: #F77902;
    @include box-shadow(inset 1px 1px rgba(248,255,170,0.5));

      i{
      -webkit-transform: translateX(40px);
      -moz-transform: translateX(40px);
      -o-transform: translateX(40px);
      transform: translateX(40px);
      }
  } 

我尝试了几个选项，但没有一个有效。有人可以如何正确使用它。我在这个项目中使用 SASS。我在没有罗盘混合的情况下离开了 translate 属性，以使其更清晰。

Answer 1

问题在于<i> 标记是内联的。它需要一个布局才能被翻译。为此，只需给它一个display: inline-block 属性，一切都很好。看这个简单的小提琴http://jsfiddle.net/WxqCw/