3

ソーシャルメディアアイコンのスプライトシートを取得して表示できるSASSミックスインを作成している最中ですが、カーソルを合わせたときの背景位置に問題があります。SASSコードは次のとおりです。

@mixin social-button($imgurl,$xpos,$ypos,$height,$width) {
  background-image: url($imgurl);
  background-position: $xpos $ypos;
  display: block;
  float: left;
  height: $height;
  width: $width;    

  &:hover {
    background-position: 0px -$height;
  }

  & span {
    position: absolute;
    top: -999em;
  }
}

そして私のインクルード：

a.facebook {
  @include social-button("../img/social-buttons.png",0px,0px,26px,26px);
}

スプライトシートの動作を確認/使用したい場合は、ここにアップロードしました：http: //i49.tinypic.com/2evtbwp.png

HTMLもここにあります：

<a class="facebook" href="#"><span>Facebook</span></a>

基本的に、ホバーのCSS出力は次のように表示されます。

a.facebook:hover {
  background-position: -26px;
}

そしてFirebugでは次のように表示されます：

a.facebook:hover {
    background-position: -26px center;
}

どんな助けでも大歓迎です、私はこの時点で私が間違っていることにかなり困惑しています..ありがとう！

PS。これらを5つ作成するので、自動生成できるループを作成してもかまいませんが、現時点では大したことではありません。最初にホバーを機能させる必要があります。

4

1 に答える 1

8

変数を負に変更するときは、変数を括弧で囲む必要があります。そうしないと、計算（0px-$ height）が実行されます。

background-position: 0px (-$height);

おそらく、も修正したいと思うでしょう0px。

于 2012-12-12T01:29:54.667 に答える