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。我没有罗盘混合就离开了翻译属性，使其更加清晰。

Answer 1

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

在悬停时链接内部链接元素

1 个答案: