0

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 プロパティを残しました。

4

1 に答える 1

0

問題は、<i>タグがインラインであることです。翻訳するにはレイアウトが必要です。そのためには、属性を与えるだけdisplay: inline-blockで十分です。この単純なフィドルを参照してくださいhttp://jsfiddle.net/WxqCw/

于 2013-10-30T22:55:06.713 に答える